悬停时图像上的部分 "X" 形状
Partial "X" shape over image on hover
我需要一种 悬停时图像上的 X 形状。但不是整个 "X",只是外部位。这是我设计师的图片:
悬停在此处时我得到了一个漂亮的 "X" 形状:
#xdiv {
width: 200px;
height: 200px;
border: 1px solid #999;
background-image: url('http://placehold.it/200x200');
}
#xdiv:hover {
cursor: pointer;
opacity: .4;
}
#xdiv:hover .xdiv1 {
height: 200px;
width: 1px;
margin-left: 100px;
background-color: #333;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
z-index: 1;
}
#xdiv:hover .xdiv2 {
height: 200px;
width: 1px;
background-color: #333;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari and Chrome */
z-index: 2;
}
<div id="xdiv">
<div class="xdiv1">
<div class="xdiv2"></div>
</div>
</div>
我从 this answer 修改而来。
以我的设计师为例,这是否可能使用 CSS 而不是在悬停时使用其他图像?
编辑:
您可以通过以下方式实现部分 X 形状:
- 2 个伪元素而不是 div 以减少标记
- top/bottom 边框和无背景所以形状的中间部分是透明的
注意:您还应该在前缀属性之后声明非前缀属性(在您的代码段中进行转换)
#xdiv {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #999;
background-image: url('http://placehold.it/200x200');
}
#xdiv:hover {
cursor: pointer;
opacity: .4;
}
#xdiv:before, #xdiv:after {
content: '';
position: absolute;
display: none;
left: 50%; top: 0;
width: 1px; height: 100px;
border-top: 50px solid #333;
border-bottom: 50px solid #333;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#xdiv:hover:before {
display: block;
}
#xdiv:hover:after {
display: block;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<div id="xdiv"></div>
上一个回答:
#xdiv {
width: 200px;
height: 200px;
border: 1px solid #999;
background-image: url('http://placehold.it/200x200');
}
#xdiv:hover {
cursor: pointer;
opacity: .4;
}
#xdiv:hover .xdiv1 {
height: 100px;
width: 1px;
margin-left: 100px;
border-top: 50px solid #333;
border-bottom: 50px solid #333;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
z-index: 1;
}
#xdiv:hover .xdiv2 {
position:relative;
top:-50px;
height: 100px;
width: 1px;
border-top: 50px solid #333;
border-bottom: 50px solid #333;
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
z-index: 2;
}
<div id="xdiv" >
<div class="xdiv1">
<div class="xdiv2"></div>
</div>
</div>
使用渐变的方法:
- 使用 div 和背景颜色,我创建了正方形 div
+-------------+
| |
| |
| |
| |
| |
| |
| |
+-------------+
- 然后,使用一个旋转 45 度的伪元素,另一个旋转 -45 度的伪元素,
您可以生成 'X' 形状(当前设置纯色背景以帮助定位):
+-------------+
|\ /|
| \ / |
| \ / |
| \ |
| / \ |
| / \ |
| / \|
+-------------+
现在,您可以使用渐变背景,而不是使用纯黑色,'color stops' 使中心透明。 (注意:对于渐变,我建议 this generator )
这样就剩下了:
+-------------+
|\ /|
| \ / |
| |
| |
| |
| / \ |
| / \|
+-------------+
取决于您对色标的定位。
演示版
div {
height: 300px;
width: 300px;
background: url(http://placekitten.com/g/300/300);
position: relative;
transform-origin: center center;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
top: -50%;
left: calc(50% - 1px);
height: 200%;
width: 2px;
transform: rotate(45deg);
}
div:after {
content: "";
position: absolute;
top: -50%;
left: calc(50% - 1px);
height: 200%;
width: 2px;
transform: rotate(-45deg);
}
div:hover:before, div:hover:after{
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 31%, rgba(0,0,0,0) 69%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(30%,rgba(0,0,0,1)), color-stop(31%,rgba(0,0,0,0)), color-stop(69%,rgba(0,0,0,0)), color-stop(70%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
<div></div>
使用框阴影的替代方法
div{
background-image: url('http://placehold.it/200x200');
width: 200px;
height: 200px;
position: relative;
margin: 40px auto;
z-index: 0;
}
div:before, div:after{
content: '';
position: absolute;
width: 33.3333333%;
height: 2px;
background: black;
z-index: 1;
}
div:before{
transform: rotate(45deg);
top: 26px;
left: -6px;
box-shadow: 13em 0 0;
}
div:after{
transform: rotate(-45deg);
right: -6px;
top: 26px;
box-shadow: -13em 0 0;
}
<div></div>
或
div{
background-image: url('http://placehold.it/200x200');
width: 200px;
height: 200px;
position: relative;
margin: 40px auto;
z-index: 0;
}
div:before, div:after{
content: '';
position: absolute;
width: 33.3333333%;
height: 2px;
background: black;
z-index: 1;
top: 48px;
}
div:before{
transform: rotate(45deg);
left: 14px;
box-shadow: 10em 0 0;
}
div:after{
transform: rotate(-45deg);
right: 14px;
box-shadow: -10em 0 0;
}
<div></div>
我需要一种 悬停时图像上的 X 形状。但不是整个 "X",只是外部位。这是我设计师的图片:
悬停在此处时我得到了一个漂亮的 "X" 形状:
#xdiv {
width: 200px;
height: 200px;
border: 1px solid #999;
background-image: url('http://placehold.it/200x200');
}
#xdiv:hover {
cursor: pointer;
opacity: .4;
}
#xdiv:hover .xdiv1 {
height: 200px;
width: 1px;
margin-left: 100px;
background-color: #333;
transform: rotate(45deg);
-ms-transform: rotate(45deg);
/* IE 9 */
-webkit-transform: rotate(45deg);
/* Safari and Chrome */
z-index: 1;
}
#xdiv:hover .xdiv2 {
height: 200px;
width: 1px;
background-color: #333;
transform: rotate(90deg);
-ms-transform: rotate(90deg);
/* IE 9 */
-webkit-transform: rotate(90deg);
/* Safari and Chrome */
z-index: 2;
}
<div id="xdiv">
<div class="xdiv1">
<div class="xdiv2"></div>
</div>
</div>
我从 this answer 修改而来。
以我的设计师为例,这是否可能使用 CSS 而不是在悬停时使用其他图像?
编辑:
您可以通过以下方式实现部分 X 形状:
- 2 个伪元素而不是 div 以减少标记
- top/bottom 边框和无背景所以形状的中间部分是透明的
注意:您还应该在前缀属性之后声明非前缀属性(在您的代码段中进行转换)
#xdiv {
position: relative;
width: 200px;
height: 200px;
border: 1px solid #999;
background-image: url('http://placehold.it/200x200');
}
#xdiv:hover {
cursor: pointer;
opacity: .4;
}
#xdiv:before, #xdiv:after {
content: '';
position: absolute;
display: none;
left: 50%; top: 0;
width: 1px; height: 100px;
border-top: 50px solid #333;
border-bottom: 50px solid #333;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#xdiv:hover:before {
display: block;
}
#xdiv:hover:after {
display: block;
-ms-transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
<div id="xdiv"></div>
上一个回答:
#xdiv {
width: 200px;
height: 200px;
border: 1px solid #999;
background-image: url('http://placehold.it/200x200');
}
#xdiv:hover {
cursor: pointer;
opacity: .4;
}
#xdiv:hover .xdiv1 {
height: 100px;
width: 1px;
margin-left: 100px;
border-top: 50px solid #333;
border-bottom: 50px solid #333;
transform: rotate(45deg);
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
z-index: 1;
}
#xdiv:hover .xdiv2 {
position:relative;
top:-50px;
height: 100px;
width: 1px;
border-top: 50px solid #333;
border-bottom: 50px solid #333;
transform: rotate(90deg);
-ms-transform: rotate(90deg); /* IE 9 */
-webkit-transform: rotate(90deg); /* Safari and Chrome */
z-index: 2;
}
<div id="xdiv" >
<div class="xdiv1">
<div class="xdiv2"></div>
</div>
</div>
使用渐变的方法:
- 使用 div 和背景颜色,我创建了正方形 div
+-------------+
| |
| |
| |
| |
| |
| |
| |
+-------------+
- 然后,使用一个旋转 45 度的伪元素,另一个旋转 -45 度的伪元素, 您可以生成 'X' 形状(当前设置纯色背景以帮助定位):
+-------------+
|\ /|
| \ / |
| \ / |
| \ |
| / \ |
| / \ |
| / \|
+-------------+
现在,您可以使用渐变背景,而不是使用纯黑色,'color stops' 使中心透明。 (注意:对于渐变,我建议 this generator )
这样就剩下了:
+-------------+
|\ /|
| \ / |
| |
| |
| |
| / \ |
| / \|
+-------------+
取决于您对色标的定位。
演示版
div {
height: 300px;
width: 300px;
background: url(http://placekitten.com/g/300/300);
position: relative;
transform-origin: center center;
overflow: hidden;
}
div:before {
content: "";
position: absolute;
top: -50%;
left: calc(50% - 1px);
height: 200%;
width: 2px;
transform: rotate(45deg);
}
div:after {
content: "";
position: absolute;
top: -50%;
left: calc(50% - 1px);
height: 200%;
width: 2px;
transform: rotate(-45deg);
}
div:hover:before, div:hover:after{
background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 31%, rgba(0,0,0,0) 69%, rgba(0,0,0,1) 70%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(30%,rgba(0,0,0,1)), color-stop(31%,rgba(0,0,0,0)), color-stop(69%,rgba(0,0,0,0)), color-stop(70%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,1) 30%,rgba(0,0,0,0) 31%,rgba(0,0,0,0) 69%,rgba(0,0,0,1) 70%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
<div></div>
使用框阴影的替代方法
div{
background-image: url('http://placehold.it/200x200');
width: 200px;
height: 200px;
position: relative;
margin: 40px auto;
z-index: 0;
}
div:before, div:after{
content: '';
position: absolute;
width: 33.3333333%;
height: 2px;
background: black;
z-index: 1;
}
div:before{
transform: rotate(45deg);
top: 26px;
left: -6px;
box-shadow: 13em 0 0;
}
div:after{
transform: rotate(-45deg);
right: -6px;
top: 26px;
box-shadow: -13em 0 0;
}
<div></div>
或
div{
background-image: url('http://placehold.it/200x200');
width: 200px;
height: 200px;
position: relative;
margin: 40px auto;
z-index: 0;
}
div:before, div:after{
content: '';
position: absolute;
width: 33.3333333%;
height: 2px;
background: black;
z-index: 1;
top: 48px;
}
div:before{
transform: rotate(45deg);
left: 14px;
box-shadow: 10em 0 0;
}
div:after{
transform: rotate(-45deg);
right: 14px;
box-shadow: -10em 0 0;
}
<div></div>