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

Question

我正在寻找一种制作css效果的方法，但除了不将效果应用于字母和按钮（仅限于图像），所以我需要在css中创建一个规则。我无法改变事物的顺序。 用我的代码，我得到这样的东西。

这是我的代码，就像你可以看到我在css中应用了一些效果，这已经适用于所有人。我只需要它用于图像。

＆＃13;

＆＃13;

.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);
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

当我应用效果时，将效果应用于字母（h5，h3，p和带有button类的btn

我不想要效果，仅适用于background-image。

我该怎么办？

Answer 1

使用background-size进行转换：

＆＃13;

＆＃13;

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%; 
  
}

＆＃13;

<div>
  Some text 
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

过渡背景的

使用属性background-size，并使用background-position进行调整，以便更好地适应

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

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

Answer 4

您可以在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>