Question

如何在另一张图片上显示图片和文字，它看起来像这个网站http://anilist.co/anime/20802/DigimonAdventuretri。

Answer 1

提示是将position: relative与z-index一起使用。基本上，z-index会在你渲染时将元素放在彼此之上。

Answer 2

在你的例子中，它感觉就像一个带有背景图像的容器DIV，在所述DIV中有一个嵌套的图像。

获得类似的结果，例如：

HTML：

 <div id="bg">
      <div id="transparentContent">
          <img src="imagePath" />
      </div>
 </div>

CSS：

#bg {
    background-image: url("imagePath");
    background-size: cover;
    background-repeat: no-repeat;
}

#transparentContent {
    background-color: rgba(0,0,0,0.5);
    color: white;
}

透明内容DIV用于在图像上创建黑化背景。

当然，还有其他方法可以达到类似的效果。

Answer 3

继承人demo

＆＃13;

header {
    position:relative;
    width:100%;
    height:400px;
    background:url('http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/deep-forest-1009475.jpg')no-repeat center;
    background-size:cover;
}

.img {
    position:relative;
    float:left;
    margin:20px;
    width:200px;
    height:calc( 100% - 40px );
    background:url('http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/silhouetted-figure-and-tree-1008861.jpg')no-repeat center;
    background-size:cover;
}

.description {
    position:relative;
    float:left;
    margin:20px 0;
    width:calc( 100% - 240px);
}

＆＃13;

<header>
    <div class="img"></div>
    <div class="description">
        <h2>Lorem Ipsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor..</p>
    </div>
</header>
<section>
    <h1>Actual text</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur. Donec ut libero sed arcu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. Pellentesque auctor nisi id magna consequat sagittis. Curabitur dapibus enim sit amet elit pharetra tincidunt feugiat nisl imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.</p>
</section>

＆＃13;

在另一个图像上显示图像

3 个答案: