七小時帶你入門HTML+CSS網(wǎng)頁設計，簡單圖片列表縮放特效（六）

家好，這篇文章給大家分享怎么樣設計一個簡單的圖片列表縮放特效頁面

話不多說，直接看效果圖：

簡單圖片列表縮放特效

html代碼：

<div class="tpt-img">
	<img class="a" src="http://www.jungjaehyung.com/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屬性是在一定的時間范圍內平滑地過渡效果，參數(shù)為時間，單位為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背景圖片的透明度呢？，可以通過以下幾種方法實現(xiàn)。

方法一：使用偽元素

這是在日常開發(fā)中被推薦使用的方法，通過這種方式實現(xiàn)不會影響到div中的其他內容的透明度只會影響它自己背景的透明度，詳細實現(xiàn)如下。

<!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顏色疊加

這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時候，結果實在是不盡人意。所以還是選擇了上面的推薦方法，不過這種方式要比上面的那種方式實現(xiàn)起來要簡單很多。如下所示。

<!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濾鏡

這種方式實現(xiàn)會影響到整個的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>

以上就是實現(xiàn)如何調整div的背景透明度，在一些特殊場景中我們還可以通過JS的方式來實現(xiàn)。上面的方法中，推薦使用的是偽元素方法，因為它在修改了div背景透明度之后，并不會影響到其他的元素，RGBA色彩添加則是局限于一些色彩華麗的地方使用，而對于一些單色調的內容來講這種方式實現(xiàn)效果不是太好。通過CSS過濾樣式，雖然是最直接的方式，但是如果在div內部有內容的情況下會影響到整個組件體系的樣式。

在實際開發(fā)中，我們可以選擇合適的方式來實現(xiàn)這個需求。當然還有其他的實現(xiàn)方式，有興趣的讀者可以留言我們一起討論。

例

設置圖像的底部邊緣，在元素的底邊上面5px：

img

{

position:absolute;

bottom:5px;

}

屬性定義及使用說明

對于絕對定位元素，bottom屬性設置單位高于/低于包含它的元素的底邊。

對于相對定位元素，bottom屬性設置單位高于/低于其正常位置的元素的底邊。

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

說明： 對于 static 元素，為 auto；對于長度值，則為相應的絕對長度；對于百分比數(shù)值，為指定值；否則為 auto。對于相對定義元素，如果 bottom 和 top 都是 auto，其計算值則都是 0；如果其中之一為 auto，則取另一個值的相反數(shù)；如果二者都不是 auto，bottom 將取 top 值的相反數(shù)。

默認值：	auto
繼承性：	no
版本：	CSS2
JavaScript 語法：	object.style.bottom="50px"

瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個瀏覽器版本號。

屬性
bottom	1.0	5.0	1.0	1.0	6.0

屬性值

值	描述
auto	默認值。通過瀏覽器計算底部的位置。
%	設置以包含元素的百分比計的底邊位置。可使用負值。
length	使用 px、cm 等單位設置元素的底邊位置。可使用負值。
inherit	規(guī)定應該從父元素繼承 bottom 屬性的值。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

在線咨詢

上一篇：路由賺錢之網(wǎng)站測速也能賺錢嗎？
下一篇：HTML中的JavaScript

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯(lián)系。

整合營銷服務商

七小時帶你入門HTML+CSS網(wǎng)頁設計，簡單圖片列表縮放特效（六）

方法一：使用偽元素

方法二：使用RGBA顏色疊加

方法三：使用CSS濾鏡

您的項目需求