Question

我需要帮助来改善我的CSS。我想在偏斜div中做一个悬停效果而不影响我放在div上的图像。

.overlay-box {
  position: relative;
  width: 150px;
  height: 150px;
  transform: skew(-10deg);
  display: inline-block;
}

.overlay-box img {
  height: 100%;
  width: 100%;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0);
  text-align: center;
  padding-top: 50%;
  opacity: 0;
  transition: ease-in-out .7s background;
  transition: ease-in-out .7s opacity;
}

.content:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, .8);
}

.info {
  font-size: 6vh;
  text-decoration: none;
}

.content a {
  color: white;
  text-decoration: none;
}

<div class="overlay-box">
  <img src="img/bg1.jpg" alt="">
  <div class="content">
    <a href="#" class="info" title="Full Image">SERVIÇOS</a>
  </div>
</div>

但是这段代码会影响我的背景图片，我可以如何倾斜我的div，我的图像继续在方形方面。

Answer 1

您可以在图像上应用反向倾斜并调整溢出：

＆＃13;

@SpringBootApplication
public class DemoApplication {

    public static void main(String[] args) {
        ConfigurableApplicationContext context = SpringApplication.run(DemoApplication.class, args);
        PrototypeBean beanA = context.getBean(PrototypeBean.class);
        PrototypeBean beanB = context.getBean(PrototypeBean.class);

        System.out.println(beanA); //id=0, PrototypeBean [singletonBean=SingletonBean [id=0]]
        System.out.println(beanB); //id=1, PrototypeBean [singletonBean=SingletonBean [id=0]]
    }
}

</code>

＆＃13;

Answer 2

歪斜需要在“内容”中，然后是背景方块和动画歪斜。

<html>
    <head>
    <style>
        .overlay-box
        {
            position: absolute;
            width: 150px;
            height: 150px;
            display: inline-block;
        }
        .overlay-box img
        {
            height: 320px;
            width: 380px;
        }

        .content
        {
            position: absolute;
            margin-left: 25px;
            top: 0;
            left: 0;
            height: 100%;
            width: auto;
            background-color: rgba(0,0,0,0);
            text-align: center;
            padding-top: 50%;
            opacity: 0;
            transform: skew(-10deg);
            transition: background .7s ease-in-out;
            transition: opacity .7s ease-in-out;
        }
        .content:hover
        {
            opacity: 1;
            background-color: rgba(0,0,0,.8);
        }
        .info
        {
            font-size: 6vh;
            text-decoration: none;
        }
        .content a
        {
            color:white;
            text-decoration: none;
        }
    </style>
    </head>
    <body>
    <div class="overlay-box">
        <img src="Download.jpg" alt="">
        <div class="content">
            <a href="#" class="info" title="Full Image">SERVIÇOS</a>
        </div>
    </body>
    </html>

Answer 3

根据我的理解，您想要偏斜文本而不是背景图像而不是背景颜色。这是我的解决方案。

[HTML]在您的a代码中放置一个div，并将class="info"放在那里。
[CSS]将skew从班级.overlay-box移至.content:hover .info选择器。确保包含两者之间的空格。

.overlay-box {
  position: relative;
  width: 150px;
  height: 150px;
                                     /*remove skew*/
  display: inline-block;
}

.overlay-box img {
  height: 100%;
  width: 100%;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: rgba(100,100,100,1);
  text-align: center;
  padding-top: 50%;
  opacity: 0;
  transition: ease-in-out .7s background;
  transition: ease-in-out .7s opacity;
}

.content:hover {
  opacity: 1;
  background-color: rgba(0, 0, 0, .8);
}

.content:hover .info {               /*add this*/
  transform: skew(-10deg);
}

.info {
  font-size: 6vh;
  text-decoration: none;
}

.content a {
  color: white;
  text-decoration: none;
  
}

<div class="overlay-box">
  <img src="img/bg1.jpg" alt="">
  <div class="content">
    <a href="#" title="Full Image"><div class="info">SERVIÇOS</div></a>
  </div>
</div>

悬浮效果对倾斜的div没有改变背景

3 个答案: