Question

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

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

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

    img {
        display: block;
    }

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

Answer 1

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 ;
}

Answer 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...}）每页只能使用一次

Answer 3

    <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;
    }

Answer 4

你需要在你的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%;
}

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

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

4 个答案: