如何获取包含背景图像以覆盖整个div？ [重复]
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何获取包含背景图像以覆盖整个div？ [重复]相关的知识，希望对你有一定的参考价值。
这个问题在这里已有答案：
好的，我的问题是如何让我的图像更具响应性？我是一名新编码员，所以我还在努力了解css。我已经尝试使用包含值，但它不包括整个div。我也尝试过封面，但是当它在div内扩展时它并没有显示整个图像。如果有人有任何想法，我很乐意听取您的意见。谢谢此外，它与覆盖整个页面的问题不同。我希望图像覆盖在我的div中，它似乎不起作用。
.tribute {
margin-top: 40px;
margin-left: 12%;
height: 250px;
width: 35%;
background: url(dickgregory.jpg);
background-size: cover;
float: left;
}<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>答案
你的图像占据了你的width元素的完整height和.tribute。问题是你们都将margin添加到.tribute元素，并限制其width。
删除边距并将width设置为100%会显示覆盖整个区域的图像。
请注意，background-size: cover可能拉伸或裁剪图像，background-size: contain将调整图像大小以确保它始终可见。
用一个例子可以很好地证明这一点。
包含：
.tribute {
height: 250px;
width: 100%;
background: url(http://placekitten.com/310);
background-size: contain;
float: left;
}<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>另一答案
不幸的是，cover和contain是处理图像的最佳方式，而不是你想要的比例。您可以使用<img>标签而不是带有背景图像的div，如果这样可以供您使用。否则，我通常会向与图像类似的元素添加背景颜色，以便更好地融合。
.tribute {
margin-top: 40px;
margin-left: 12%;
height: 250px;
width: 35%;
background-image: url('https://upload.wikimedia.org/wikipedia/commons/7/7b/Dick_Gregory.jpg');
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
background-color: #666;
float: left;
}<div id="projects">
<br>
<br>
<h1 class="centerh1">Projects</h1>
<hr class="portfoliohr">
<a href="https://codepen.io/boiledbiscuit/pen/dzeMPW?q=dick+gregory&limit=all&type=type-pens" target="blank">
<div class="tribute">
</div>
</a>
</div>以上是关于如何获取包含背景图像以覆盖整个div？ [重复]的主要内容，如果未能解决你的问题，请参考以下文章