首先,我使用wordpress创建自己的个人HTML和CSS网站。我已经为我的HTML代码添加了一个具有指定大小的空容器。这个容器类的名称是LiveChat。
这是HTML:
<div class="LiveChat">
<img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
</div>
我现在要做的是添加背景图像,“缩放”35%。此外,我想在这个图像周围有一个15px白色边框的白色边框。因此我创建了这段代码:
.LiveChat {
background-image: url("https://away.de/wp-content/uploads/2018/05/Bild1.jpg");
background-repeat: no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
overflow: hidden;
border-color: white;
border-width: 15px;
}
.LiveChat img {
-webkit-transform: scale(1.35);
transform: scale(1.35);
}
首先,我的元素周围没有白色边框。第二个问题是,元素右侧有一个白条......
现在我想添加一个悬停效果。当有人将鼠标悬停在背景图像上时,缩放应该达到100%。可悲的是,使用它时没有任何反应:
.LiveChat:hover img{
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
因为我现在整天都在努力,所以我希望你们有一些经验丰富的建议。非常感谢!
.LiveChat {
background-image: url("https://away.de/wp-content/uploads/2018/05/Bild1.jpg");
background-repeat: no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
overflow: hidden;
border-color: white;
border-width: 15px;
}
.LiveChat img {
-webkit-transform: scale(1.35);
transform: scale(1.35);
}
.LiveChat:hover img{
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
<div class="LiveChat">
<img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
</div>
答案 0 :(得分:1)
您的边框没有显示的原因是您还没有定义边框样式:
将border-style: solid
添加到CSS将解决这个问题。
图像不是&#34;缩放&#34;因为您还没有将:hover
添加到css中。
我已将width: 100%
添加到图片中,以确保它填充div容器。
试试这段代码:
.LiveChat {
background-image: url("https://away.de/wp-content/uploads/2018/05/Bild1.jpg");
background-repeat: no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
overflow: hidden;
border-style: solid;
border-color: white;
border-width: 15px;
}
.LiveChat img {
-webkit-transform: scale(1.35);
transform: scale(1.35);
width: 100%;
}
.LiveChat img:hover {
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
&#13;
<div class="LiveChat">
<img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
</div>
&#13;
值得注意的是,您可以通过将样式分组来进一步清理您的CSS:
.LiveChat {
background: url("https://baway.de/wp-content/uploads/2018/05/Bild1.jpg") no-repeat;
display: block;
margin: auto;
width: 100%;
height: auto;
overflow: hidden;
border: 15px solid white;
}
答案 1 :(得分:0)
尝试以下代码
.LiveChat {
background-repeat: no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
width: 452px;
height: 452px;
overflow: hidden;
border:15px solid #ddd;
overflow: hidden;
}
.LiveChat img {
-webkit-transform: scale(1.35);
transform: scale(1.35);
transition: all 2s ease-in 0s;
-webkit-transition: all 2s ease-in 0s;
-ms-transition: all 2s ease-in 0s;
cursor: pointer;
}
.LiveChat:hover img{
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
<div class="LiveChat">
<img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
</div>
答案 2 :(得分:0)
而不是使用border-color: white;
和border-width: 15px;
使用border: 15px solid white
。我使用了黑色,因此它可以用于演示目的。
缩放效果很好。
.LiveChat {
background-image: url("https://away.de/wp-content/uploads/2018/05/Bild1.jpg");
background-repeat: no-repeat;
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
height: auto;
overflow: hidden;
border: 15px solid black;
}
.LiveChat img {
-webkit-transform: scale(1.35);
transform: scale(1.35);
}
.LiveChat img:hover {
-webkit-transform: scale(2.0);
transform: scale(2.0);
}
<div class="LiveChat">
<img src="https://baway.de/wp-content/uploads/2018/05/Bild1.jpg" alt="Live Chat">
</div>
答案 3 :(得分:0)
感谢你们两位。通常情况下,悬停代码应该是字,而不是。我现在会问Avada支持,因为它的主题一定是问题......