给图像上的文本提供背景阴影

时间:2016-06-16 12:50:41

标签: html css

我们的网站上有图片,如下所示

enter image description here

在图片底部我们正在显示文字,我们想为该文字提供背景阴影,如下所示:

enter image description here

.fanbook-img img {
    width: 100% !important;
}

    img {
        display: block;
    }

    , *:before, *:after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

4 个答案:

答案 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%;
}

我希望它会对你有所帮助。