這樣一個(gè)需求,就是在一個(gè)DIV中包含有一個(gè)Image標(biāo)簽,但是在Div標(biāo)簽中包含有一張背景圖片,設(shè)計(jì)圖上的樣子是這張背景圖片是有一個(gè)透明度的,但是如果直接使用opacity屬性設(shè)置的的話就會(huì)連Div中的內(nèi)容的透明度也會(huì)受到影響,那么我們?nèi)绾卧贖TML中設(shè)置div背景圖片的透明度呢?,可以通過(guò)以下幾種方法實(shí)現(xiàn)。
這是在日常開發(fā)中被推薦使用的方法,通過(guò)這種方式實(shí)現(xiàn)不會(huì)影響到div中的其他內(nèi)容的透明度只會(huì)影響它自己背景的透明度,詳細(xì)實(shí)現(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; /* 調(diào)整透明度 */
z-index: 1;
}
.content {
position: relative;
z-index: 2;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="content">
這里是內(nèi)容
</div>
</div>
</body>
</html>
這種方式比較適合那種需要給背景圖片上添加蒙版的情況,但是筆者嘗試的時(shí)候,結(jié)果實(shí)在是不盡人意。所以還是選擇了上面的推薦方法,不過(guò)這種方式要比上面的那種方式實(shí)現(xiàn)起來(lái)要簡(jiǎ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">
這里是內(nèi)容
</div>
</body>
</html>
這種方式實(shí)現(xiàn)會(huì)影響到整個(gè)的div的樣式,也就是說(shuō)頁(yè)面中的內(nèi)容的透明度也會(huì)受到影響,并且這種影響不會(huì)被其他樣式所改變。如下所示。
<!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); /* 調(diào)整透明度 */
}
</style>
</head>
<body>
<div class="container">
這里是內(nèi)容
</div>
</body>
</html>
以上就是實(shí)現(xiàn)如何調(diào)整div的背景透明度,在一些特殊場(chǎng)景中我們還可以通過(guò)JS的方式來(lái)實(shí)現(xiàn)。上面的方法中,推薦使用的是偽元素方法,因?yàn)樗谛薷牧薲iv背景透明度之后,并不會(huì)影響到其他的元素,RGBA色彩添加則是局限于一些色彩華麗的地方使用,而對(duì)于一些單色調(diào)的內(nèi)容來(lái)講這種方式實(shí)現(xiàn)效果不是太好。通過(guò)CSS過(guò)濾樣式,雖然是最直接的方式,但是如果在div內(nèi)部有內(nèi)容的情況下會(huì)影響到整個(gè)組件體系的樣式。
在實(shí)際開發(fā)中,我們可以選擇合適的方式來(lái)實(shí)現(xiàn)這個(gè)需求。當(dāng)然還有其他的實(shí)現(xiàn)方式,有興趣的讀者可以留言我們一起討論。
目中有時(shí)候會(huì)遇到這個(gè)問(wèn)題:一行有3個(gè)div,希望這3個(gè)div平分屏幕寬度,并且高度等于寬度。
第一個(gè)問(wèn)題:平分屏幕寬度
可以對(duì)div設(shè)置百分比寬度,而不是直接用px寬度,這里用到了響應(yīng)式設(shè)計(jì)的思想,可以參考這篇文章:自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)(Responsive Web Design)
第二個(gè)問(wèn)題:動(dòng)態(tài)設(shè)置高度和寬度一致
有兩種方法,一種是用js動(dòng)態(tài)設(shè)置,一種是直接用CSS設(shè)置
先看下html代碼
<ul>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
</ul>
公用的CSS
ul,li{
list-style: none;
}
* {
margin: 0;
padding: 0;
outline: 0
}
body {
margin: 0;
padding: 0;
-webkit-appearance: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
}
ul{
margin:10px;
}
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
用js動(dòng)態(tài)設(shè)置
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
$(window).resize(function() {
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
});
用CSS設(shè)置
.dummy {
padding-top: 100%; /* 1:1 aspect ratio */
width: 100%;
background: #333333;
}
CSS設(shè)置padding-top的原理:Use CSS to Specify the Aspect Ratio of a Fluid Element
/———————————————————
然后嘗試對(duì)圖片設(shè)置高度等于動(dòng)態(tài)寬度
js方法很簡(jiǎn)單,跟上面的方法基本相同
<ul>
<li class="container">
<img src="images/test_1.jpg"/>
<div class="element">
some text
</div>
</li>
<li class="container">
<img src="images/test_2.jpg"/>
<div class="element">
some text
</div>
</li>
<li class="container">
<img src="images/test_3.jpg"/>
<div class="element">
some text
</div>
</li>
</ul>
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
.container img{
width: 100%;
height:100%;
}
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
$(window).resize(function() {
var cw = $('.dummy').width();
$('.dummy').css({'height':cw+'px'});
});
CSS方法
<ul>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
<li class="container">
<div class="dummy">
</div>
<div class="element">
some text
</div>
</li>
</ul>
.container {
display: inline-block;
position: relative;
width: 32%;
text-align: center;
}
.dummy{
padding-top: 100%; /* 1:1 aspect ratio */
width: 100%;
background:url(images/test_3.jpg) no-repeat;
-webkit-background-size: 100%;
background-size: 100%;
}
通過(guò)設(shè)置background可以實(shí)現(xiàn)。
div包含img的方法沒(méi)有試驗(yàn)成功,以后繼續(xù)嘗試
/————————————-
還有一個(gè)問(wèn)題,怎么設(shè)置div和img之間的padding,又能保證div寬度是屏幕寬度的三分之一?
果圖:
核心點(diǎn):
寬度自適應(yīng) width
默認(rèn)情況下, 塊級(jí)元素不設(shè)置寬度, 默認(rèn)為整個(gè)屏幕寬度或者和父級(jí)同寬
如果元素脫離了文檔流(浮動(dòng)或者定位), 那么元素的寬度由元素的內(nèi)容決定
相關(guān)介紹: MDN
resize 生效的條件: 不支持內(nèi)聯(lián)元素; 塊級(jí)元素,需要overflow屬性的計(jì)算值不是visible。
整體布局
<div class="container">
<!-- resizable 用于拉伸的工具 -->
<div class="resizable"></div>
<!-- content 要展示的內(nèi)容區(qū)域 -->
<div class="content">content</div>
</div>
基礎(chǔ)知識(shí), 拉伸區(qū)域的實(shí)現(xiàn), 右下角出現(xiàn)可拉伸圖標(biāo)
.content {
width: 200px;
height: 200px;
resize: horizontal;
cursor: ew-resize;
overflow: hidden; // 必須要配合overflow來(lái)使用resize, 否則拉伸圖標(biāo)無(wú)法顯示
border: 1px solid red;
}
<div class="content">content</div>
限制拉伸尺寸
通過(guò)設(shè)置min-width、min-height、max-width和max-height可以限制拉伸尺寸。
所有代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.container {
position: relative;
/* 脫離文檔流 */
float: left;
}
.resizable {
width: 200px;
height: 200px;
overflow: scroll;
resize: horizontal;
cursor: ew-resize;
opacity: 0;
min-width: 200px; // 盒子寬度最小為200px
}
/* 更改拖拽圖標(biāo)的大小和父容器一樣大 */
.resizable::-webkit-scrollbar {
width: 20px;
height: 200px;
}
/* 使用定位, 將容器定位到父容器的正中間, 跟著父容器的大小改變而改變 */
.content {
margin: 0;
height: 200px;
position: absolute;
top: 0;
/* 留出5px為了鼠標(biāo)放上去可以顯示拖拽 */
right: 5px;
bottom: 0;
left: 0;
border: 1px solid;
}
</style>
</head>
<body>
<div class="container">
<!-- resizable 用于拖拽的工具 -->
<div class="resizable"></div>
<!-- content 要展示的內(nèi)容區(qū)域 -->
<div class="content">content</div>
</div>
</body>
</html>
層級(jí)圖
*請(qǐng)認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。