html - 如何仅将效果应用于背景图像而不是文本

Question

我正在寻找一种制作 css 效果的方法，但不将效果应用于字母和按钮(仅限图像)，因此我需要在 css 中创建一个规则。我不能改变事情的顺序。 通过我的代码，我得到了这样的结果。

这是我的代码，就像您看到的那样，我在 css 中应用了一些效果，并且它正在应用于所有效果。我只需要它来制作图像。

.myimage01 {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.myimage01:hover {
  -webkit-transform: scale(1.3);
  transform: scale(1.3);
}

<li id="armonioso-text-2" class="widget widget_armonioso_text">
  <div class="armonioso-textwidget-wrapper  armonioso-textwidget-no-paddings">
    
    <!-- Here I'm currently Applying the efect -->
    <div class="armonioso-textwidget myimage01" data-style="background-image: url(http:www.myurl.com/image.jpg);padding: 40px 30px ;color: #ffffff;text-align: center;">
      <h5>hello world</h5>
      <h3>Here how works</h3>
      <p>Take a look of new things
        <p><a class="btn alt" href="about/index.html" target="_self">About me</a>
    </div>
  </div>
  <!-- Here I'm currently Applying the efect -->
</li>

当我应用效果时，将效果应用于字母(h5、h3、p 和按钮 使用 btn 类)

我不想要它们的效果，只想要background-image。

我该怎么办？

Answer 1

对于过渡背景，使用属性background-size，并使用background-position 调整为更适合您

body {
  margin: 0
}
.myimage01 {
  background-size: 100%;
  background-position:center center;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
  background-image: url(http://lorempixel.com/1600/900);
  padding: 40px 30px;
  color: #ffffff;
  text-align: center;
}
.myimage01:hover {
  background-size: 130%;
}

<li id="armonioso-text-2" class="widget widget_armonioso_text">
  <div class="armonioso-textwidget-wrapper  armonioso-textwidget-no-paddings">
    <!-- Here I'm currently Applying the efect -->
    <div class="armonioso-textwidget myimage01">
      <h5>hello world</h5>
      <h3>Here how works</h3>
      <p>Take a look of new things
        <p><a class="btn alt" href="about/index.html" target="_self">About me</a>
    </div>
  </div>
  <!-- Here I'm currently Applying the efect -->
</li>