Question

我是html / css的新手，我正在为我的妈妈编写一个网站。（这里的实例：http://jleblanc.pancakeapps.com/core.html）并且对于我的生活，我无法在底部拍摄照片来填充他们各自的div！你们中的任何人都有想法吗？如果图像被切断，我不在乎。

HTML

<div class="one">
    <article>
    </article>
</div>
<div class="two">
    <article>
    </article>
</div>
<div class="three">
    <article>
    </article>
</div>

CSS

.one {
    background:linear-gradient(rgba(255,0,0,0.45),rgba(255,0,0,0.45)),url(http://dash.ga.co/assets/firstcourse.jpg)
}

.two {
    background:linear-gradient(rgba(0,255,0,0.45),rgba(0,255,0,0.45)),url(http://dash.ga.co/assets/secondcourse.jpg)
}

.three {
    background:linear-gradient(rgba(0,0,255,0.45),rgba(0,0,255,0.45)),url(http://dash.ga.co/assets/dessertcourse.jpg)
}

Answer 1

您正在使用CSS background属性将图片设置为div的背景。尝试更改background-size属性：

.one {
  background-size: cover;
}

使图像完全填充div而不平铺

1 个答案: