html - 在 CSS 中设置图像周围的背景

Question

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

<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 位置？

Answer 1

你是这个意思吗？

有一个 fiddle - 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');
}