Question

目前，我网站的首页有9个互动框，可以在悬停时改变颜色。我想要做的是将背景图像放入每个框中（希望每个图像都可以缩放到框的大小）。最终，我希望这些图像在交互或鼠标悬停时也会褪色/变亮。这是我的网站：http://thefloodplains.com/

这是我的一些CSS代码：

.col-md-4 {
    color:#00A5D1;
    height:300px;
    border: 1px solid #FF8B6F;
}
.col-md-4:hover{
    background-color: #FFE097;
}
.col-md-4 h3 {
    position: relative;
    top: 40%;
    transform: translateY(-50%);
}

/* Basic Structure
-------------------------------------------------------------- */

h3 {
    font-size:14px;
    text-align:center;
    font-family: 'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
}

这是首页的HTML：

<style>
    h3 {
        font-size:36px;
        font-style: bold;
        text-align:center;
        font-family:'Buernard', Garamond, "Buenard", "EB Garamond",'EB Garamond';
    }     
    .1 {
            background-image: url('');
            max-width: 100%;
            max-height: 100%;
    }
    .2 {
            background-image: url('');
            max-width: 100%;
            max-height: 100%;
    }
    .3 {
            background-image: url('../images/divbg.png');
            max-width: 100%;
            max-height: 100%;
    }
    .4 {
            background-image: url('Birds%20on%20Wire.jpg');
            max-width: 100%;
            max-height: 100%;
    }
    .5 {
            background-image: url('Shark Cans Logo.jpg');
            max-width: 100%;
            max-height: 100%;
    }
    .6 {
            background-image: url('Ocean%20Water.jpg');
            max-width: 100%;
            max-height: 100%;
    }
    .7 {
            background-image: url('Piano.jpg');
            max-width: 100%;
            max-height: 100%;
    }
    .8 {
            background-image: url('../images/divbg.png');
            max-width: 100%;
            max-height: 100%;
    }
    .9 {
            background-image: url('../images/divbg.png');
            max-width: 100%;
            max-height: 100%;
    }
    </style>    
    </head>
    <body>
        <div class="container">
            <div class="row">
                <a href="About.html" title="About the site and Author"><div class="col-md-4">
                    <h3>About</h3>
                    </div></a>
                <a href="Articles.html" title="Original Articles and Content"><div class="col-md-4">
                    <h3>Articles</h3>
                </div>
                <a href="Coding Corner.html" title="Coding Corner - Code for a Variety of Projects"><div class="col-md-4">
                    <h3>Coding Corner</h3>
                </div></a>
            </div>
            <div class="row">
                <a href="Contact - Social.html" title="Contact The Floodplains & The FloodShark"><div class="col-md-4 4">
                    <h3>Contact & Social</h3>
                </div></a>
                <a href="The FloodShark Main.html" title="The FloodShark Music and Media"><div class="col-md-4 5">
                    <h3>
                    The FloodShark
                    Music
                    </h3>
                </div></a>
                <a href="Floodplain Productions.html" title="Floodplain Productions - virtual record label"><div class="col-md-4 6">
                    <h3>Floodplain Productions</h3>
                </div></a>
            </div>  
            <div class="row">   
                <a href="Classical Corner.html" title="Classical Corner - A nook dedicated to sharing and categorizing classical music"><div class="col-md-4">
                    <h3>Classical Corner</h3>
                </div></a>
                <a href="Gallery.html" title="Images, Photographs, and Album Art"><div class="col-md-4">
                    <h3>Gallery</h3>
                </div></a>
                <a href="Contribute - Support - Donate.html" title="Contribute to The Floodplains!"><div class="col-md-4">
                    <h3>Contribute / Support</h3>
                </div></a>
            </div>  
        </div>  
    </body>
</html>

正如您可能看到的那样，我已经开始尝试将背景（WIP）图像放在9个盒子的DIV元素中（如.1，.2，.3等所示）。 ..）。不幸的是，在测试我的代码时，没有任何改变。我觉得我在解决方案中跳舞。

作为一个额外的警告，我希望所选图像自动缩放到盒子的大小 - 我不太确定这是多么困难，但我喜欢任何有关如何实现这一点的建议

任何和所有建议都将深表感谢。白天和黑夜都很棒：）

Answer 1

将背景图像覆盖在容器上是：

div {
  background-image:url(../images/please-dont-use-spaces.jpg); //add the background image
  background-position: center center; //center the image in the div
  background-size: cover; //cover the entire div
}

还要考虑这样的事情，而不是添加一堆你可能不需要的课程：

.block {
  width: 100%;
  height: 100%;
}

.block:nth-of-type(1){
  background-image:url(./images/background1.jpg);
}

.block:nth-of-type(2){
  background-image:url(./images/background2.jpg);
}

/* etc */

需要帮助在<div>中插入背景图像

1 个答案: