css中content图片属性

CSS中的content属性有很多不同的用法，其中之一是可以在伪元素（如:before，:after等）中使用content属性来插入图片。

.content:before{
    content: url('image.jpg');
}

这里的:url()是用于引入一张图片的函数。在此例中，图片的路径为“image.jpg”。通过这个简单的代码，我们可以在CSS中引入图片到网页中。

我们也可以通过控制CSS中的content属性来调整图片的显示方式。

.content:after{
    content:'';
    display:block;
    width: 100%;
    height: 100%;
    background: url('image.jpg') center center no-repeat;
    background-size: cover;
}

在这个例子中，我们使用了:after伪元素而不是:before伪元素。我们设置了这个元素的display属性为block，并让它的宽高与父元素相同。background属性同时使用了图片，水平和垂直居中，并且不重复。background-size属性被设置为cover，以便我们的图片尽可能大地填充元素，并适合其宽高比。

通过使用content属性，我们可以轻松地在网页中插入图片，并通过CSS属性进行调整。这为我们的设计提供了更多的灵活性和创造性。