Posted on | by liu
在网页设计中，插入图片是必不可少的。同时，为了达到更好的视觉效果，大家需要给这些图片添加一些特效。此时，CSS就派上用场了。
那么，如何在图片上插入CSS呢？接下来，大家将一步步讲解。
首先，大家需要在HTML中添加一张图片。请看下面的代码：
<img src="picture.jpg" alt="这是一张图片">
这里，大家添加了一张名为“picture.jpg”的图片，并设置了它的“alt”属性。
接着，大家需要定义一些CSS样式，来对这张图片进行修改。请看下面的代码：
<style>
p {
position: relative;
}
p img {
display: block;
width: 100%;
height: auto;
}
p::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .5);
opacity: 0;
z-index: 1;
transition: opacity .2s ease-in-out;
}
p:hover::before {
opacity: 1;
}
</style>代码中，大家将图片定位在一个“p”标签中，并为这个“p”标签设置“position: relative”属性。接着，大家修改了“p”标签下的“img”标签，加入了“display: block”（使其成为块状元素）和“width: 100%”（使其充满容器的宽度）属性。
随后，大家定义了一个“p::before”伪元素，并为它设置了“content: ""”和“position: absolute”属性。接着，大家设置了该伪元素在容器的左上角，并将它的宽高设置为100%（占据整个容器）。大家还为它设置了“background: rgba(0, 0, 0, .5)”属性，即半透明的黑色背景，并设置了初始的“opacity: 0”属性值。最后，大家还为这个伪元素设置了“transition: opacity .2s ease-in-out”属性，以实现渐变动画效果。
接下来，大家为“p:hover::before”伪元素添加了“opacity: 1”属性，以实现鼠标悬停时的显示效果。
最后，大家将这个CSS样式应用到之前的“p”标签中，即可实现在图片上插入CSS的效果。