图像上的css文本

我有一个图像，必须采取全宽。我需要在一个特定的地方放置一个文本和一个按钮。我查看了很多主题，但无法弄清楚如何使其充分响应。图像上的css文本

<div class"wrapper"> 
    <div class="image-box"> 
     <img src="x"> 
    </div> 
    <div class="content-box"> 
     <h1>text goes there</h1> 
     <a>anchor tag goes there</a> 
    </div> 
</div>

所以这是布局，但它可以改变，如果它让我到我需要的点。

如果我理解正确，父div被称为包装应设置为位置：相对和所有子div的位置：绝对，之后，你只需定位所有这些子元素的顶部，左侧，右侧，底部。所以经过测试，这是我得到的。由于图像始终是视口的100％，因此它的高宽比会越来越小。图像上的文字和按钮只是停留在一个固定的位置，在某一点之后它会从图像中消失。

我的错误是什么？

P.S发现了很多话题，但仍然是，我搞砸了。感谢您的见解和帮助。

来源

2014-10-02 DasBoot

image标签用于在页面上创建一个单独的元素。这不是真的你想要什么......你想要的内容框有一个背景，对吧？而不是使用图片标签，使用CSS应用背景图片。

here is a jsfiddle

.content-box { 
 
    /* set width and height to match your image */ 
 
    /* if these are omitted, it will only be as big as your content, */ 
 
    /* and only show that much of your image */ 
 
    width: 200px; 
 
    height: 300px; 
 
    /* obviously, replace this with your image */ 
 
    background:url('http://placecage.com/200/300'); 
 
}

<div class"wrapper"> 
 
    <div class="content-box"> 
 
     <h1>text goes there</h1> 
 
     <a>anchor tag goes there</a> 
 
    </div> 
 
</div>

来源

2014-10-02 13:10:12

我想这是你想要的。此外，这是一个很好的机会来使用这些HTML5标签figure 和figcaption，但基本上所有你需要的是这种结构：

<div class="wrapper"> 
    <img /> 
    <div class="content-box"> 
     <!-- Your content here --> 
    </div> 
</div>

所以这里发生的一切是你的wrapper的尺寸由固定图像，然后你绝对定位你的content-box或其中的元素。如果你不想在你的形象的顶部或底部，它们的位置，只需使用百分比值positionning时：

top: 10%;

figure { 
 
    position: relative; 
 
} 
 

 
figure img { 
 
    width: 100%; 
 
    height: auto; 
 
} 
 

 
figure figcaption { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: 0; 
 
    background: rgba(255,255,255,.7); 
 
    padding: 10px; 
 
}

<figure> 
 
    <img src="http://www.jpl.nasa.gov/spaceimages/images/mediumsize/PIA17011_ip.jpg" /> 
 
    <figcaption> 
 
    <h1>The image title</h1> 
 
    <p>This is the image caption</p> 
 
    </figcaption> 
 
</figure>

来源

2014-10-02 13:13:40

图像上的css文本

回答

相关问题