Question

我想知道我是否可以做得更好...查看此测试链接：link to developer site

我在图像上做了黑色渐变框（我被骗了）有没有办法用css做到这一点？就像我可以制作一个渐变的div，它以某种方式被推到了图像的底部，但仍然让我的文字显示在那里？会很棒，因为那时我可以更改渐变框甚至删除它而不更改图片......？

以下是包含块

的代码

<div class="full-width-image-2 img-responsive">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="clinic-tagline"> learn, practice & have fun at a clinic
                </div>
            </div>   
        </div>
    </div>
</div>

这是Css：

.full-width-image-2 {
    background:url("../img/clinic-collage2.jpg") no-repeat center center;
    background-size: cover;
    height:400px;
    margin-top:140px;
}

Answer 1

您可以使用：after伪元素添加具有不透明背景颜色的文本。只是绝对定位：在元素之后相对于div与背景图像。

简单示例： http://jsfiddle.net/j3epatxw/

HTML：

<div id="image-background">
    <p>This is the div w/ background image</p>
</div>

CSS：

#image-background {
    height: 300px;
    background: #892242;
    position: relative;
    color: #ccc;
    /* add your background image here - just used a bg color to save time */
}

#image-background:after {
    content: 'learn, practice & have fun at a clinic';
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0,0,0,0.4);
    padding: 40px;
    text-align: center;
    color: #fff;
}

Answer 2

您可以使用线性渐变作为背景，并使用合适的色块。

body {
    background: url(http://lorempixel.com/output/abstract-q-c-640-480-3.jpg);
  margin:0;
  padding:0;
  background-size:cover;
}
div {
    background-image: linear-gradient(to bottom, transparent 0%, transparent 50%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0.5) 100% );
    color:white;
}

<div><p>Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae nostrum tempora saepe blanditiis consectetur dolor qui animi. Dolor voluptatibus aliquid deserunt delectus asperiores laudantium impedit quisquam molestiae perferendis qui tenetur quia facilis numquam necessitatibus cumque laboriosam maxime. Debitis placeat nisi quaerat molestiae vel deserunt corporis. Mollitia officiis amet beatae maxime?</p></div>

然后，只需要根据需要布置div。

Answer 3

谢谢大家！这就是我解决它的方法：

 <div class="full-width-image-3 img-responsive"></div>

        <div class="gradient">

            <div class="clinic-tagline">learn, practice & have fun at a clinic</div>

        </div>

CSS：

.clinic-tagline {
  margin-top: -180px;
  color: rgba(102, 101, 101, 0.87);
  font-family: 'Dancing Script', cursive;
  font-size: 4rem;
  font-style:italic;
  text-align: center;
  padding-top:40px;
  padding-bottom:20px;
  /* gradient:  */
background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 32%, rgba(0,0,0,0.96) 98%, rgba(0,0,0,0.96) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(32%,rgba(0,0,0,0.78)), color-stop(98%,rgba(0,0,0,0.96)), color-stop(100%,rgba(0,0,0,0.96))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.78) 32%,rgba(0,0,0,0.96) 98%,rgba(0,0,0,0.96) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.78) 32%,rgba(0,0,0,0.96) 98%,rgba(0,0,0,0.96) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.78) 32%,rgba(0,0,0,0.96) 98%,rgba(0,0,0,0.96) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.78) 32%,rgba(0,0,0,0.96) 98%,rgba(0,0,0,0.96) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#f5000000',GradientType=0 ); /* IE6-9 */
}

Div有渐变吗？安置的可能性

3 个答案: