css如何更换图片 |css3 框架 缩放

CSS是网页制作中不可缺少的一部分，其中更换图片也是大家在日常制作中经常会用到的功能。下面大家就来看一下CSS如何更换图片。 要更换图片，大家首先需要使用CSS中的background-image属性。该属性为元素设置背景图像，并指定该图像将出现在其他内容之上。这个属性需要设置一个图片的URL地址。例如：

p {
background-image: url("image.jpg");
}

上述代码将会把p元素的背景图片设置为名为“image.jpg”的图片。 有时候大家需要在不同的屏幕尺寸下使用不同的图片。这时大家可以使用媒体查询来实现：

p {
background-image: url("image-lg.jpg");
}
@media only screen and (max-width: 600px) {
p {
background-image: url("image-sm.jpg");
}
}

上述代码将在窗口宽度小于等于600像素的情况下，把p元素的背景图片更改为名为“image-sm.jpg”的小图像。 如果有多个元素都需要使用同一张图片，大家也可以使用CSS中的类选择器来实现：

.bg-img {
background-image: url("image.jpg");
}

上述代码将为所有类名为“bg-img”的元素指定相同的背景图片。 最后，大家也可以使用伪类选择器来更改元素的背景图片，比如hover伪类：

.button {
background-image: url("button.jpg");
}
.button:hover {
background-image: url("button-hover.jpg");
}

上述代码将会把鼠标悬停在类名为“button”的元素上时，更换其背景图片为名为“button-hover.jpg”的图片。 以上就是CSS中更换图片的相关内容，希望对大家有所帮助。