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

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          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>

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

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23

          公用的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;

          }

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23
          • 24

          用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'});

          });

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          用CSS設(shè)置

          .dummy {

          padding-top: 100%; /* 1:1 aspect ratio */

          width: 100%;

          background: #333333;

          }

          • 1
          • 2
          • 3
          • 4
          • 5

          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>

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20

          .container {

          display: inline-block;

          position: relative;

          width: 32%;

          text-align: center;

          }

          .container img{

          width: 100%;

          height:100%;

          }

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10

          var cw = $('.dummy').width();

          $('.dummy').css({'height':cw+'px'});

          $(window).resize(function() {

          var cw = $('.dummy').width();

          $('.dummy').css({'height':cw+'px'});

          });

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6

          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>

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13
          • 14
          • 15
          • 16
          • 17
          • 18
          • 19
          • 20
          • 21
          • 22
          • 23

          .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%;

          }

          • 1
          • 2
          • 3
          • 4
          • 5
          • 6
          • 7
          • 8
          • 9
          • 10
          • 11
          • 12
          • 13

          通過(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í)圖


          主站蜘蛛池模板: 国产剧情国产精品一区| 中文字幕一区二区日产乱码| 精品亚洲一区二区三区在线观看 | 成人精品视频一区二区三区不卡 | 国产不卡视频一区二区三区| 国产主播福利一区二区| 中文字幕人妻丝袜乱一区三区| 国内精品一区二区三区在线观看| 国产经典一区二区三区蜜芽| 国产另类TS人妖一区二区| 视频一区精品自拍| 精品国产一区二区三区在线观看| 日韩在线一区高清在线| 国内精品视频一区二区三区| 欧美日韩国产免费一区二区三区 | 精品国产一区二区三区久久影院| 国内自拍视频一区二区三区 | 欧洲亚洲综合一区二区三区| 亚洲国产一区二区三区在线观看 | 性盈盈影院免费视频观看在线一区| 亚洲区精品久久一区二区三区 | 亚洲国产综合精品一区在线播放| 国产一区二区三区福利| 精品一区中文字幕| 国产精品无码一区二区在线观一| 日韩一区二区精品观看| 精品人妻一区二区三区四区| 麻豆国产在线不卡一区二区| 国模吧一区二区三区精品视频| 在线观看精品视频一区二区三区| 在线电影一区二区三区| 国产麻豆剧果冻传媒一区| 国产在线观看91精品一区| 人妻无码一区二区三区| 中文字幕色AV一区二区三区| 精品一区二区三区免费毛片爱| 国产福利一区二区三区在线视频 | 日韩人妻无码一区二区三区综合部 | 久久久无码精品国产一区| 亚洲视频在线一区二区三区| 国产精品无码一区二区在线观|