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

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 和 button 以及 btn class)

我不要他们的效果，只为background-image。

我该怎么办？

Answer 1

尝试转换 background-size 属性而不是缩放整个容器。

Answer 2

您可以对 background-size、background-position 应用变换以获得背景图像的效果。

.myimage01 {
  background-size:100%;
  background-position:0px 0px;
  -webkit-transform: all;
  transform: all;
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}
.myimage01:hover {
  background-size:140%;
  background-position:-50px -50px;
  -webkit-transform: all;
  transform: all;
}

<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" style="background-image: url(http://dummyimage.com/600x200/000/fff);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>

Answer 3

使用背景大小进行过渡：

div { 
  background-image: url(http://lorempixel.com/400/200/sports/1/);
  background-size: 100%; 
  background-repeat:no-repeat;
  background-position:50% 50%;
  width:400px;
  height:200px;
  transition: background-size 200ms linear;

  text-align:center;
  line-height:200px;

 }

div:hover {
  background-size: 120%; 
  
}

<div>
  Some text 
</div>

Answer 4

对于过渡背景使用属性 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>

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

How to apply effect just to background image and not text

html

css

background-image

css-transitions