CSS四个角加图片

在网页开发中，经常会遇到需要在页面的四个角添加图片的情况。这种设计可以使页面看起来更加美观和有趣，同时也能够吸引用户的注意力。在本文中，我们将详细介绍如何使用CSS实现在网页的四个角添加图片的效果。

使用position属性实现四个角加图片

首先，我们可以使用CSS的position属性来实现在四个角添加图片。通过设置不同的定位值，我们可以使图片出现在页面的四个角。下面是一个简单的示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
    .top-left {
        position: absolute;
        top: 0;
        left: 0;
    }

    .top-right {
        position: absolute;
        top: 0;
        right: 0;
    }

    .bottom-left {
        position: absolute;
        bottom: 0;
        left: 0;
    }

    .bottom-right {
        position: absolute;
        bottom: 0;
        right: 0;
    }

    img {
        width: 100px;
        height: 100px;
    }
</style>
</head>
<body>
    <img src="top-left.jpg" class="top-left">
    <img src="top-right.jpg" class="top-right">
    <img src="bottom-left.jpg" class="bottom-left">
    <img src="bottom-right.jpg" class="bottom-right">
</body>
</html>

在上面的代码中，我们分别定义了四个类.top-left, .top-right, .bottom-left, .bottom-right，并将图片应用到对应的类中。通过设置position属性为absolute，并设置top、left、right、bottom属性的值，我们可以让图片出现在页面的四个角。

使用伪元素实现四个角加图片

除了使用position属性外，我们还可以通过CSS的伪元素来实现在四个角添加图片的效果。下面是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
    .corner {
        position: relative;
        display: inline-block;
    }

    .corner::before {
        content: "";
        position: absolute;
        width: 100px;
        height: 100px;
    }

    .top-left::before {
        background-image: url(top-left.jpg);
        top: 0;
        left: 0;
    }

    .top-right::before {
        background-image: url(top-right.jpg);
        top: 0;
        right: 0;
    }

    .bottom-left::before {
        background-image: url(bottom-left.jpg);
        bottom: 0;
        left: 0;
    }

    .bottom-right::before {
        background-image: url(bottom-right.jpg);
        bottom: 0;
        right: 0;
    }
</style>
</head>
<body>
    <div class="corner top-left"></div>
    <div class="corner top-right"></div>
    <div class="corner bottom-left"></div>
    <div class="corner bottom-right"></div>
</body>
</html>

在上面的代码中，我们定义了一个类.corner作为容器，并使用伪元素::before来添加图片。通过设置content属性为空字符串，以及设置位置和背景图片的属性，我们可以在页面的四个角添加图片。