Question

我正在尝试更改图像的不透明度，以便稍后可以使用悬停效果，更改不透明度，创建一个很酷的效果。问题是不透明度属性不起作用！我似乎无法找到解决方案。 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;
    }

Answer 1

您需要具有基本状态和图像的悬停状态。将您的CSS更改为：

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

    .affect:hover img {
      opacity: 1;
    }

这会创建悬停效果。

Answer 2

不透明度默认值为1，请尝试将其设为0.5。

无法更改图片的不透明度

2 个答案: