代码之家 › 专栏 › 技术社区 › theebugger

如何在CSS中使图像显示在元素的填充区域上?

behind padding background image css

theebugger · 技术社区 · 8 年前

这是我得到的。但我想要红色区域后面的矩形facebook图像(目前它正好位于文本“Please”后面)

#mlnk{
  text-decoration:none;
  position:relative;
  top:40%;
  left:0%;
  color: #b5c5d6;
}
.container-corner-img{  /* **THIS IS TO BE PUSHED BACK** */
   height: 40%; width: 70%;
   position: absolute;
   top: 5px; left:-75px;
 }
 .container{
   width:50%;
   height:30%;       
   background: linear-gradient(#8B9DC1, #3b5998);
   padding:100px;
   border-radius:12px;
   position: relative;
   font-family: sans-serif;
 }
 h1{  /* **THIS NEEDS TO BE BROUGHT TO FRONT** */
   margin-left: auto;
   margin-right: auto;
   padding: 8px;
   border-radius: 4px;
   box-shadow: 0 4px 6px 0 rgba(0,0,0,0.2);
   transition: 0.4s ease;
   background-color: red;
   margin-top: 0;
 }     
 img{
   height: 80%;
   width: 50%;
 }     
 <div class="container">
   <div class="container-corner-img">
     <img src="fbminimal.png">
   </div>
   <h1>
    <a id="mlnk" href = "#link"> Please login to your facebook account      first</a>
   </h1>
 </div>

我已经对CAPS中的css定义发表了评论,我认为这些定义需要重点关注。

1 回复 | 直到 8 年前

theebugger 8 年前

要将标题置于前面,您必须设置 z-index 到更大的值。能够使用 z指数 在元素上,它需要具有不同于 static . So使用 relative . 此外,不要使用 center -标记,因为它已弃用。布局应仅由CSS控制。

#mlnk {
  text-decoration: none;
  position: relative;
  top: 40%;
  left: 0%;
  color: #b5c5d6;
}

h3 {
  color: midnightblue;
  padding: 4px;
  box-shadow: 0 2px 4px 0 #38434e;
  background: #3c64ad;
}

.container-corner-img {
  /* **THIS IS TO BE PUSHED BACK** */
  height: 40%;
  width: 70%;
  position: absolute;
  top: 5px;
  left: -75px;
  /* opacity: 0.4; */
}

.container {
  width: 50%;
  height: 30%;
  background: linear-gradient(#8B9DC1, #3b5998);
  padding: 100px;
  border-radius: 12px;
  position: relative;
  font-family: sans-serif;
  /* z-index: 1; */
  margin: 0 auto;
}

h1 {
  /* **THIS NEEDS TO BE BROUGHT TO FRONT** */
  margin-left: auto;
  margin-right: auto;
  padding: 8px;
  border-radius: 4px;
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2);
  transition: 0.4s ease;
  background-color: red;
  /* rgba(0,0,80,0.2); */
  margin-top: 0;
  /* Add this */
  position: relative;
  z-index: 1000;
}

h1:hover {
  box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.2), 0 6px 8px 0 rgba(0, 0, 0, 0.19);
  transition: 0.4s ease;
}

img {
  height: 80%;
  width: 50%;
  /* z-index: 0; */
}

.center {
  text-align: center;
  margin: 0 auto;
}

<div class="center">
  <div class="container">
    <div class="container-corner-img">
      <img src="https://stocknews.com/wp-content/uploads/2017/07/facebook-fb-alternate.jpg">
    </div>
    <h1>
      <a id="mlnk" href="#link"> Please login to your facebook account      first</a>
    </h1>
    <h3>You need to Log In</h3>
  </div>
</div>