HTML如何設(shè)置div背景圖片的的透明度

這樣一個(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>

方法二：使用RGBA顏色疊加

這種方式比較適合那種需要給背景圖片上添加蒙版的情況，但是筆者嘗試的時(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>

方法三：使用CSS濾鏡

這種方式實(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>

</div>

some text

</div>

</li>

</div>

some text

</div>

</li>

</div>

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>

some text

</div>

</li>

some text

</div>

</li>

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>

</div>

some text

</div>

</li>

</div>

some text

</div>

</li>

</div>

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):

div寬度自適應(yīng)

寬度自適應(yīng) width
默認(rèn)情況下, 塊級(jí)元素不設(shè)置寬度, 默認(rèn)為整個(gè)屏幕寬度或者和父級(jí)同寬
如果元素脫離了文檔流(浮動(dòng)或者定位), 那么元素的寬度由元素的內(nèi)容決定

css resize屬性

相關(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>

container 父容器, 用于控制脫離文檔流, 然其寬度隨著拉伸大小而決定
resizable 可以拉伸的容器, 從而可以控制父容器的寬度
content 真正展示的容器, 其寬度隨著父級(jí)而定

基礎(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í)圖

在線咨詢

上一篇：如何在html中使用less，親測(cè)可用
下一篇：圖表分析中的HTML5地圖需求，這款BI輕松5步就給解決了

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

HTML如何設(shè)置div背景圖片的的透明度

方法一：使用偽元素

方法二：使用RGBA顏色疊加

方法三：使用CSS濾鏡

您的項(xiàng)目需求