無法更改圖像的不透明度

我試圖改變圖像的不透明度，以便稍後使用懸停效果，將不透明度更改回來，創建一個很酷的效果。問題是不透明屬性不起作用！我似乎無法找出解決方案。 Bootstrap有可能以某種方式防止這種情況發生？無法更改圖像的不透明度

我的HTML：

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
    <!-- Required meta tags always come first --> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous"> 
    <link rel="stylesheet" href="css/style.css"> 
    <link href="https://fonts.googleapis.com/css?family=Oswald:300,400" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Prociono" rel="stylesheet"> 
    <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> 

</head> 
<body> 
    <!-- HEADER --> 
    <section id="header"> 

     <h1 class="name">Jessica Shae</h1> 


     <div class="container heading"> 
      <div class="row"> 

       <div class="col-md-4"> 
        <img src="img/7.jpg" class="display"> 
       </div> 
       <div class="col-md-4"> 
        <img src="img/2.jpg" class="display"> 
       </div> 
       <div class="col-md-4"> 
        <img src="img/9.jpg" class="display"> 
       </div> 

     <div class="row"> 
       <div class="col-md-12 text-xs-center"> 
        <a href="#gallery"<i class="fa fa-chevron-down fa-3x" aria-hidden="true"></i></a> 

       </div> 
      </div> 

    </section> 

    <!-- Gallery --> 

    <section id="gallery"> 

     <h2 class="title">The Dark Room</h2> 

     <div class="container photo-collection"> 
      <div class="row"> 

       <div class="col-md-4 affect"> 
        <img src="img/1.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/10.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/4.jpg" class="work"> 
       </div> 
      </div> 

      <div class="row"> 

       <div class="col-md-4 affect"> 
        <img src="img/18.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/6.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/8.jpg" class="work"> 
       </div> 
      </div> 

      <div class="row"> 

       <div class="col-md-4 affect"> 
        <img src="img/12.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/11.jpg" class="work"> 
       </div> 
       <div class="col-md-4 affect"> 
        <img src="img/14.jpg" class="work"> 
       </div> 
      </div> 

     </div> 

    </section>

我的CSS：（不透明度屬性是.affect）

* { 
     /*background-color: rgb(0, 0, 0);*/ 
     background: #070606; 
    } 

    /* HEADER */ 

    .display { 
     height: auto; 
     width: 500px; 
     box-sizing: border-box; 
     overflow: hidden; 
     overflow-x: hidden; 
     max-width: 100%; 
     border: 4px solid white; 
     border-radius: 6%; 
    } 

    .heading { 
     max-width: 100%; 
    } 

    .name { 
     font-family: 'Oswald', sans-serif; 
     text-transform: uppercase; 
     font-size: 500%; 
     font-weight: 100; 
     text-align: center; 
     color: whitesmoke; 
     width: 100%; 
     margin-bottom: 20px; 
     margin-top: 15px; 
    } 

    h1:after { 
     display: block; 
     height: 2px; 
     background-color: #e62222; /*Great way to give single line color */ 
content: " "; 
     width: 100px; 
     margin: 0 auto; 
     margin-top: 20px; 
    } 

    .fa { 
     margin-top: 18px; 
    } 

    .fa:link, /*Prevents color change when clicked */ 
    .fa:visited { 
     text-decoration: none; 
     color: #bdc3c7; 
    } 

    .fa:hover, 
    .fa:active { 
     color: #ebedee; 
    } 

    /* GALLERY */ 

    .work { 
     width: 300px; 
     height: 100%; 
     margin-top: 50px; 
     border: 3px solid white; 
    } 

    .title { 
     font-family: 'Prociono', serif; 
     font-size: 350%; 
     color: whitesmoke; 
     text-align: center; 
     padding-top:40px; 

    } 

    .affect img { 
     opacity: 1; 
     background-color: #070606; 
    }

來源

2016-11-02 Temple Naylor

有關[CSS不透明度]（https://developer.mozilla.org/en-US/docs/Web/CSS/opacity）的更多信息，請參見此處。 – jacefarm

您需要爲圖像設置基本狀態和懸停狀態。將您的CSS更改爲：

.affect img { 
     opacity: 0.2; 
     background-color: #070606; 
     transition: opacity .35s; 
    } 

    .affect:hover img { 
     opacity: 1; 
    }

這會創建懸停效果。

來源

2016-11-02 03:25:05 Sasith

啊，沒有意識到我必須創建一個懸停狀態才能工作。謝謝。 –

高興地幫助你。還要感謝@jacefarm的編輯。 – Sasith

不透明度默認值是1嘗試使0.5。

來源

2016-11-02 03:24:18

無法更改圖像的不透明度

回答

相關問題