在不改变背景的情况下对倾斜的 div 进行悬停效果
Posted
技术标签:
【中文标题】在不改变背景的情况下对倾斜的 div 进行悬停效果【英文标题】：Hover effect on skewed div without change background 【发布时间】：2018-07-13 01:28:22 【问题描述】：我需要帮助来改进我的 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" >
<div class="content">
<a href="#" class="info" title="Full Image">SERVIÇOS</a>
</div>
</div>但是这段代码会影响我的背景图片，我如何倾斜我的 div 并且我的图片在正方形方面继续。
【问题讨论】：
您只希望文本倾斜？不是黑色背景吧？ 【参考方案1】：您可以在图像上应用反向倾斜并调整溢出：
.overlay-box
position: relative;
width: 150px;
height: 150px;
transform: skew(-10deg);
display: inline-block;
overflow:hidden;
margin:20px;
.overlay-box img
height: 100%;
width:calc(100% + 40px);
margin:auto -20px;
transform: skew(10deg);
.content
position: absolute;
top: 0;
left: 0;
height: 50%;
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="https://lorempixel.com/400/400/" >
<div class="content">
<a href="#" class="info" title="Full Image">SERVIÇOS</a>
</div>
</div>【讨论】：
你好，我试过这样做，但在我的 div 覆盖框上，它显示为背景。她没有覆盖div。你看到运行 sn -p 的效果了吗？ @AndréAlanAlves 我没听懂你……你能详细说明一下吗 你好，我希望我的图像切割成与 div 相同形状的倾斜，但不影响图像。你听得懂吗？ 我想我在制作效果之前需要剪切图像，我是对的吗？ 您好，目前我有这个，但图像有失真，我不希望我的图像出现这种失真。但她必须坚持下去你明白我的意思吗？ andrealanengenharia.com.br/templates/1/newindex.php【参考方案2】：据我了解，您想要倾斜文本而不是背景图像而不是背景颜色。这是我的解决方案。
-
[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" >
<div class="content">
<a href="#" title="Full Image"><div class="info">SERVIÇOS</div></a>
</div>
</div>【讨论】：
如果它帮助您解决问题，请考虑接受我的回答。谢谢！【参考方案3】：倾斜需要在“内容”中，然后是背景方块和动画倾斜。
<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" >
<div class="content">
<a href="#" class="info" title="Full Image">SERVIÇOS</a>
</div>
</body>
</html>
【讨论】：
以上是关于在不改变背景的情况下对倾斜的 div 进行悬停效果的主要内容，如果未能解决你的问题，请参考以下文章