背景图像 - 约束比例
问题描述:
我有一个div与背景图像。 Div的宽度为20% - 我希望它根据用户分辨率改变其大小。问题是我无法强制背景图像缩放约束比例。 此外,我有一个标签 - 我想我被安置在第一个div的底部。背景图像 - 约束比例
这是我想要完成的任务:
我的代码:
<a href="">
<div class="box">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</a>
我的CSS:
.box {
float: left;
width: 19.60%;
margin-left:0.40%;
margin-top:10px;
text-align:center;
background-image: url("beijing.png");
background-size: cover;
}
.label {
font-size:28px;
color:#fff;
font-family:Roboto;
font-weight:300;
background-color: rgba(60, 60, 62, 0.5);
}
.description {
font-size:12px;
color:#fff;
font-family:Roboto;
font-weight:300;
background-color: rgba(60, 60, 62, 0.5);
text-transform:uppercase;
}
答
的
https://unsplash.com/
我看过你的代码,它似乎你没有指定高度为.box
- 所以这c使内容崩溃到内容的高度,完全模糊背景图像。
我可以建议的是,您使用.box
元素的padding bottom hack to dictate a fixed aspect ratio的组合,并将元数据(标签和位置)包裹在另一个元素中,然后绝对地将其放置在框中。
.box {
float: left;
width: 19.60%;
margin-left:0.40%;
margin-top:10px;
text-align:center;
background-image: url("https://download.unsplash.com/photo-1426200830301-372615e4ac54");
background-size: cover;
position: relative;
padding-bottom: 19.60%;
}
.meta {
background-color: rgba(0,0,0,.75);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.label {
font-size:28px;
color:#fff;
font-family:Roboto;
font-weight:300;
background-color: rgba(60, 60, 62, 0.5);
}
.description {
font-size:12px;
color:#fff;
font-family:Roboto;
font-weight:300;
background-color: rgba(60, 60, 62, 0.5);
text-transform:uppercase;
}
<a href="">
<div class="box">
<div class="meta">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</div>
</a>
更妙的是:我知道这可能不是你仔细找什么,但不是用百分比来决定利润再减去从小数宽度,您可以做的只是使用CSS flexbox或CSS列来完成繁重的工作(取决于您希望元素流向哪个方向)。
另外,使用CSS为每个.box
元素单独指定背景图像可能太费事。您可以将背景图像存储为HTML5的data-
属性值,然后使用JS(在这种情况下,我将使用jQuery使代码更具可读性,但是原始JS方法完全可行)以迭代方式分配背景图像。
$(function() {
$('.box').each(function() {
$(this).css('background-image', 'url('+$(this).data('bg')+')');
});
});
.wrapper {
display: flex;
flex-wrap: wrap;
padding: 5px;
}
.box {
display: block;
margin: 5px;
width: calc(20% - 10px);
padding-bottom: 19.60%;
text-align:center;
background-size: cover;
position: relative;
}
.meta {
background-color: rgba(0,0,0,.75);
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.label {
font-size:28px;
color:#fff;
font-family:Roboto;
font-weight:300;
background-color: rgba(60, 60, 62, 0.5);
}
.description {
font-size:12px;
color:#fff;
font-family:Roboto;
font-weight:300;
background-color: rgba(60, 60, 62, 0.5);
text-transform:uppercase;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<a href="" class="box" data-bg="https://download.unsplash.com/photo-1426200830301-372615e4ac54">
<div class="meta">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</a>
<a href="" class="box" data-bg="https://download.unsplash.com/photo-1423683249427-8ca22bd873e0">
<div class="meta">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</a>
<a href="" class="box" data-bg="https://download.unsplash.com/photo-1421091242698-34f6ad7fc088">
<div class="meta">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</a>
<a href="" class="box" data-bg="https://download.unsplash.com/photo-1421809313281-48f03fa45e9f">
<div class="meta">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</a>
<a href="" class="box" data-bg="https://download.unsplash.com/photo-1421757295538-9c80958e75b0">
<div class="meta">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</a>
<a href="" class="box" data-bg="https://download.unsplash.com/photo-1421940975339-33bdde74a873">
<div class="meta">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</a>
<a href="" class="box" data-bg="https://download.unsplash.com/photo-1421977870504-378093748ae6">
<div class="meta">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</a>
<a href="" class="box" data-bg="https://download.unsplash.com/photo-1421930451953-73c5c9ae9abf">
<div class="meta">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</a>
<a href="" class="box" data-bg="https://download.unsplash.com/photo-1422310299561-e3b8b45d859f">
<div class="meta">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</a>
<a href="" class="box" data-bg="https://download.unsplash.com/photo-1423483641154-5411ec9c0ddf">
<div class="meta">
<div class="label">Beijing</div>
<div class="description">August 2014</div>
</div>
</a>
</div>
提供图片。
非常感谢 - 完美的工作 – t3x 2015-04-06 09:55:14