七小时带你入门HTML+CSS网页设计，简单图片列表缩放特效（六）

家好，这篇文章给大家分享怎么样设计一个简单的图片列表缩放特效页面

话不多说，直接看效果图：

简单图片列表缩放特效

html代码：

<div class="tpt-img">
	<img class="a" src="http://www.hmttv.cn/uploadfile/2024/0807/20240807025546826.png">
	<div class="b a">
		<div class="c"></div>
		<div class="d">
			简单图片列表缩放特效
		</div>
	</div>
</div>

知识点：

css:hover选择器是在鼠标移动到对应标签上的特殊样式，它可以用于所有元素。

css3 transform属性应用于元素的2D或3D转换，如旋转、缩放、移动、倾斜等。

css3 transition属性是在一定的时间范围内平滑地过渡效果，参数为时间，单位为s（秒）或者ms（毫秒）。

注意，以上的css3特效属性都要考虑浏览器的兼容性，如：

div {
	transform: scale(1.2,1.2);
	-webkit-transform: scale(1.2,1.2); /* Safari 和 Chrome */
	-moz-transform: scale(1.2,1.2); /* Firefox */
	-ms-transform: scale(1.2,1.2) /* IE 9 */
	-o-transform: scale(1.2,1.2); /* Opera */
}

CSS代码：

.tpt-img {
	position: relative;
	overflow: hidden;
	margin: 10px;
	width: 350px;
	height: 250px
}
.tpt-img img {
	z-index: 0;
	float: left;
	height: 100%;
	width: 100%
}
.tpt-img:hover img {
	opacity: 0.8;
	transform: scale(1.2,1.2);
	-webkit-transform: scale(1.2,1.2);
	-moz-transform: scale(1.2,1.2);
	-ms-transform: scale(1.2,1.2);
	-o-transform: scale(1.2,1.2)
}
.tpt-img .a {
 transition: all .40s ease-in-out;
	-webkit-transition: all .40s ease-in-out;
	-moz-transition: all .40s ease-in-out;
	-ms-transition: all .40s ease-in-out;
	-o-transition: all .40s ease-in-out
}
.tpt-img .b {
	opacity: 0;
	cursor: pointer;
	position: absolute;
	top: 250px;
	height: 100%;
	width: 100%;
}
.tpt-img:hover .b {
	opacity: 1;
	transform: translateY(-50px);
	-webkit-transform: translateY(-50px);
	-moz-transform: translateY(-50px);
	-ms-transform: translateY(-50px);
	-o-transform: translateY(-50px)
}
.tpt-img .c {
	z-index: 1;
	background: #8ec1cd;
	position: absolute;
	height: 100%;
	width: 100%
}
.tpt-img .d {
	z-index: 2;
	color: #fff;
	position: absolute;
	line-height: 50px;
	text-align: center;
	height: 100%;
	width: 100%
}

这样一个简单的图片列表缩放特效就完成了，当然，布局的方式有很多种，这只是其中一个方法，也欢迎大家留言分享一下其他的布局方式，谢谢观看！！！

这样一个需求，就是在一个DIV中包含有一个Image标签，但是在Div标签中包含有一张背景图片，设计图上的样子是这张背景图片是有一个透明度的，但是如果直接使用opacity属性设置的的话就会连Div中的内容的透明度也会受到影响，那么我们如何在HTML中设置div背景图片的透明度呢？，可以通过以下几种方法实现。

方法一：使用伪元素

这是在日常开发中被推荐使用的方法，通过这种方式实现不会影响到div中的其他内容的透明度只会影响它自己背景的透明度，详细实现如下。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            position: relative;
            width: 300px;
            height: 200px;
            overflow: hidden;
        }

        .container::before {
            content: "";
            background-image: url('your-image.jpg');
            background-size: cover;
            background-position: center;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.5; /* 调整透明度 */
            z-index: 1;
        }

        .content {
            position: relative;
            z-index: 2;
            color: white;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="content">
            这里是内容
        </div>
    </div>
</body>
</html>

方法二：使用RGBA颜色叠加

这种方式比较适合那种需要给背景图片上添加蒙版的情况，但是笔者尝试的时候，结果实在是不尽人意。所以还是选择了上面的推荐方法，不过这种方式要比上面的那种方式实现起来要简单很多。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: rgba(255, 255, 255, 0.5) url('your-image.jpg') no-repeat center center;
            background-size: cover;
        }
    </style>
</head>
<body>
    <div class="container">
        这里是内容
    </div>
</body>
</html>

方法三：使用CSS滤镜

这种方式实现会影响到整个的div的样式，也就是说页面中的内容的透明度也会受到影响，并且这种影响不会被其他样式所改变。如下所示。

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 300px;
            height: 200px;
            background: url('your-image.jpg') no-repeat center center;
            background-size: cover;
            filter: opacity(0.5); /* 调整透明度 */
        }
    </style>
</head>
<body>
    <div class="container">
        这里是内容
    </div>
</body>
</html>

以上就是实现如何调整div的背景透明度，在一些特殊场景中我们还可以通过JS的方式来实现。上面的方法中，推荐使用的是伪元素方法，因为它在修改了div背景透明度之后，并不会影响到其他的元素，RGBA色彩添加则是局限于一些色彩华丽的地方使用，而对于一些单色调的内容来讲这种方式实现效果不是太好。通过CSS过滤样式，虽然是最直接的方式，但是如果在div内部有内容的情况下会影响到整个组件体系的样式。

在实际开发中，我们可以选择合适的方式来实现这个需求。当然还有其他的实现方式，有兴趣的读者可以留言我们一起讨论。

例

设置图像的底部边缘，在元素的底边上面5px：

img

{

position:absolute;

bottom:5px;

}

属性定义及使用说明

对于绝对定位元素，bottom属性设置单位高于/低于包含它的元素的底边。

对于相对定位元素，bottom属性设置单位高于/低于其正常位置的元素的底边。

注意：如果"position：static"，底部的属性没有任何效果。

说明： 对于 static 元素，为 auto；对于长度值，则为相应的绝对长度；对于百分比数值，为指定值；否则为 auto。对于相对定义元素，如果 bottom 和 top 都是 auto，其计算值则都是 0；如果其中之一为 auto，则取另一个值的相反数；如果二者都不是 auto，bottom 将取 top 值的相反数。

默认值：	auto
继承性：	no
版本：	CSS2
JavaScript 语法：	object.style.bottom="50px"

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
bottom	1.0	5.0	1.0	1.0	6.0

属性值

值	描述
auto	默认值。通过浏览器计算底部的位置。
%	设置以包含元素的百分比计的底边位置。可使用负值。
length	使用 px、cm 等单位设置元素的底边位置。可使用负值。
inherit	规定应该从父元素继承 bottom 属性的值。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

在线咨询

上一篇：路由赚钱之网站测速也能赚钱吗？
下一篇：HTML中的JavaScript

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

七小时带你入门HTML+CSS网页设计，简单图片列表缩放特效（六）

方法一：使用伪元素

方法二：使用RGBA颜色叠加

方法三：使用CSS滤镜

您的项目需求