Question

我的搜索按钮有一些内容。如果我点击搜索按钮，它需要出现一个处理gif图像，该图像应该在透明背景的中心。内容看起来像这样。提前感谢您的每一个答案

.img-loader{
  text-align: center;
  width: 50px;
  display: block;
  margin: 0 auto;
}

.wrapper{
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background: rgba(0, 135, 0, 0.1);
  position: absolute;
  top: 0;

}

<div class="content">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div class="wrapper">
  <img src="http://michaelrienstra.com/jquery.cspinner/demo/spinner.gif" class="img-loader">  
</div>

Answer 1

更改img这样的css

.img-loader{
    text-align: center;
    width: 50px;
    display: block;
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin:auto;
}

.img-loader{
  text-align: center;
  width: 50px;
  display: block;
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;
}

.wrapper{
  margin: 0 auto;
  width: 100%;
  height: 100%;
  background: rgba(0, 135, 0, 0.1);
  position: absolute;
  top: 0;

}

<div class="content">
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>

<div class="wrapper">
  <img src="https://pixabay.com/static/uploads/photo/2015/08/31/15/29/person-915604_640.jpg" class="img-loader">  
</div>

Answer 2

请尝试以下操作： Demo

.img-loader {      
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -28px 0 0 -25px;
}
.wrapper {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
}

HTML：

<div class="wrapper">
    <img src="http://michaelrienstra.com/jquery.cspinner/demo/spinner.gif" alt="" class="img-loader" />
</div>

Answer 3

您可以尝试这样做，而不是使用top和position属性：

.img-loader{ 
    width:50px;
    display: inline-block;
    margin:0 auto; 
}

这将保留图片center-align。

如何在css中使用透明背景居中图像？

3 个答案: