我们的网站上有图片,如下所示
在图片底部我们正在显示文字,我们想为该文字提供背景阴影,如下所示:
.fanbook-img img {
width: 100% !important;
}
img {
display: block;
}
, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
答案 0 :(得分:3)
HTML -
<div id="img"><div id="text"><p>text </p></div><div>
CSS -
#img{
background-image: url('');
}
#text{
background-color: rgba(?,?,?,0.5);
padding: 10px 10px;
margin: 0 ;
}
答案 1 :(得分:2)
文本和整个事物需要在某些html元素中,例如HTML
<p>text</p>
然后将获得CSS
p {
display: block;
padding: [vertical padding] [horizontal padding];
background: [background color, in rgba];
}
display: block
使其为全宽并使其成为填充。只是为了给你一个工作CSS的例子,这里是样本值:
p {
display: block;
padding: 20px 40px;
background: rgba(255,255,255,.5);
}
background
是一个rgba(“红绿蓝alpha”)值,以便为您提供透明度。十六进制值是为网络写入颜色的另一种常见方式(它们看起来像“#ff00ff”),不支持透明度。 r,g和b为0(无)至255(满),a为0(透明)至1(不透明);这个例子是半透明的白色(rgba(0,0,0,.5)
是半透明的黑色)。
请注意,CSS中p
中的p {...}
定位于HTML中的<p>..</p>
- 如果您将文本包装在其他元素中,则可以在而不是CSS。定位“裸”选择器可能会有风险,因为这些样式将适用于它的每个实例。为了更安全,还可以定位类或id,而不是元素名称。例如
HTML
<p class="text-with-transparent-background">
text
</p>
CSS
.text-with-transparent-background {
...(styles as above)...
}
class
可以在一个页面上多次重复使用。 id
(HTML <elementname id="yourcustomidname">...</elementname>
,CSS #yourcustomidname {...styles...}
)每页只能使用一次
答案 2 :(得分:1)
<div class="fanbook-img">
<a href="http://sb.kidsdial.com/white-marble-2-samsung-galaxy-j7-phone-case.html">
<div class="">texttext texttext texttext texttext texttext texttext</div>
<img style="width:250px;height:250px;text-align:center;" src="http://sb.kidsdial.com/media/FanBook/iQdzXDrvEU.jpg">
</a>
</div>
.fanbook-img > a {
position: relative;
width: 100%;
}
.fanbook-img div {
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
color: #ffffff;
height: auto;
left: 0;
margin: 0 auto;
padding: 10px;
position: absolute;
right: 0;
text-align: center;
width: 100%;
z-index: 99;
}
答案 3 :(得分:1)
你需要在你的CSS中做一些改变。请参阅下面的css代码。
.fanbook-name {
background: rgba(255, 255, 255, 0.5); /* add this */
bottom: 0;
position: absolute;
text-align: center;
width: 100%;
z-index: 1;
}
.fanbook-name b {
/* bottom: 25px; */
color: #000;
font-size: 12px;
/* position: relative; */
text-transform: capitalize;
}
.fanbook-image li {
float: left;
margin-bottom: 1%; /* change this */
margin-left: 0.5%;
margin-right: 0.5%;
position: relative; /* add this */
width: 24%;
}
我希望它会对你有所帮助。