在 CSS 中设置图像周围的背景答案

【问题标题】：Setting background around image in CSS在 CSS 中设置图像周围的背景
【发布时间】：2014-05-27 00:43:57
【问题描述】：

我插入一张图片并对其进行分类：

<div class="first-img"><img src="images/image1.png" alt="image01" /></div>

现在我希望 CSS 为这张图片设置背景：

.slide .first-img{
  text-align: left;
  width: 5%;
  height: 5%;
  bottom: 0;
  left: 307px;
  top: 119px;
  right: 0;
  position: absolute;
  opacity: 1;
  background: rgba(255,255,255,0.2);
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
}

但它所做的是将图像放在背景的正下方。无论我为填充设置什么，图像只有在背景结束后才开始。如何同步背景和图像的 x 和 y 位置？

【问题讨论】：

标签： html css image background

【解决方案1】：

这是你的意思吗？

拉小提琴 - Fiddle Link!

HTML

<div class="first-img"><img src="images/image1.png" alt="image01" /></div>

CSS

.first-img { 
    padding: 30px;
    width: 500px;
    background: url('http://www.placehold.it/500/FF0000');
}

【讨论】：

【解决方案2】：

两个选项

只需将 css 背景图像转换为第一个图像。

.first-img {
    background-image:url(images/background.jpg);
}

或者创建一个容器来包裹滑块并在其中放置背景图像

<div id="wraper_slide">
<div class="first-img"><img src="images/image1.png" alt="image01" /></div>
</div>

#wraper_slide {
    background-image:url(images/55-anos-logo.jpg);
}

【讨论】：