Question

我试图添加一个＆＃34;谢谢你＆＃34;横幅，响应并保持在任何屏幕上的位置。

我拥有的:(使用标签）

我想要的是:(带有水平响应条的图像）像这样：

Answer 1

这将使具有100％宽度的元素垂直和水平居中。

＆＃13;

body {
  margin: 0;
  background: transparent url("https://images.unsplash.com/photo-1459664018906-085c36f472af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0eee25e1e8252c9ec91aa736760d1a2e") 0 0 no-repeat; 
  background-size: cover;
}

p {
  background: black;
  padding: 1em 0;
  color: white;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

＆＃13;

<p>Thank You!!</p>

＆＃13;

http://codepen.io/antibland/pen/QNJVqW?editors=1100

Answer 2

您也可以尝试以下代码：

<style>

        img {
            width: 100%;
            height: 40em;
        }
        h1 {
            align-self: center;
            width: 100%;
            padding: 1em;
            background-color: black;
            color: white;
            text-align: center;
        }
    </style>
</head>

<body>

        <img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&w=1080&fit=max&s=0eee25e1e8252c9ec91aa736760d1a2e" alt="">
        <h1> Beautiful flower</h1>

</body>

Answer 3

div.wrapper{  
    float:left; /* important */  
    position:relative; /* important(so we can absolutely position the description div */  
} 

 div.content{  
        position:absolute; 
        bottom:0px;   
        left:0px;  
        width:100%;     
        font-family: 'tahoma';  
        font-size:15px;  
        color:white; 
      
    }  
   div.content p{  
       background: black;
       padding: 1em 0;
       color: white;
       text-align: center;
       position: absolute;
       top: -150px;
       left: 50%;
       transform: translate(-50%, -50%);
       width: 100%;
       opacity:0.8
    }

<!DOCTYPE html>
<html>
<title></title>
<body>
<div class='wrapper'>  
  
      <img src="http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" style="max-width:1170px; max-height:301.333px;min-width:1170px; min-height:301.333px;">
  
<div class=content >  
<p>Thank you</p>
    </div>  
  </div>
  </body>
</html>

如何在HTML中的图像上添加元素？

3 个答案: