[分享]css中 把图片变成块

在CSS中，我们可以使用background属性，将图片作为背景图案加入网页中。但有时候，我们需要将图片作为一个独立的块元素，例如用作LOGO、按钮等。这时候，我们可以使用CSS的伪元素：before...

在CSS中，我们可以使用background属性，将图片作为背景图案加入网页中。但有时候，我们需要将图片作为一个独立的块元素，例如用作LOGO、按钮等。

这时候，我们可以使用CSS的伪元素：before或after。

首先，将要使用的图片放入html代码中，例如：

<img src="image.jpg" alt="图片"> 

接下来，在CSS中指定要将图片变成一个块元素，比如：

img {
    display: none;  /* 隐藏原来的图片 */
}
img:before {
    content: "";   /* 添加空的content，激活伪元素 */
    display: block;  /* 把伪元素变成一个块元素 */
    width: 200px;  /* 指定块元素的宽度 */
    height: 200px; /* 指定块元素的高度 */
    background-image: url(image.jpg);  /* 声明块元素的背景图案为原来的图片 */
} 

至此，代码完成。现在，该图片就变成了一个块元素，可以在页面中随心所欲地摆放、样式定制了。