0

与此接近，但由于某种原因它失去了渐变。我认为这与 z-index 有关，但不确定。当我放置一个找不到的图像文件时，当您将鼠标悬停时，您会看到渐变。

<style>
.border_overlay:hover {

/* Image Dimensions */
width:160px;
height:160px;

/* Moves overlay over Image */
position:relative;
z-index:1;
margin-bottom:-160px;

/* SVG fallback(Opera 11.10-, IE9) */
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxkZWZzPjxsaW5lYXJHcmFkaWVudCBpZD0iZ3JhZGllbnQiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj48c3RvcCBvZmZzZXQ9IjAlIiBzdHlsZT0ic3RvcC1jb2xvcjpyZ2JhKDAsMCwwLDEpOyIgLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0eWxlPSJzdG9wLWNvbG9yOnJnYmEoMTI4LDEyOCwxMjgsMSk7IiAvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IGZpbGw9InVybCgjZ3JhZGllbnQpIiBoZWlnaHQ9IjEwMCUiIHdpZHRoPSIxMDAlIiAvPjwvc3ZnPg==);

/* Opera 11.10+ */
background: -o-linear-gradient(top, rgba(0,0,0,1), rgba(128,128,128,1));

/* Firefox 3.6+ */
background: -moz-linear-gradient(top, rgba(0,0,0,1), rgba(128,128,128,1));

/* Chrome 7+ & Safari 5.03+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,1)), color-stop(1, rgba(128,128,128,1)));

/* IE5.5 - IE7 */
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF000000,EndColorStr=#FF808080);

/* IE8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FF000000,EndColorStr=#FF808080)"

/* Border width and color */
    border:1px solid black;

/* Border Opacity */
opacity:0.3;
.filter:alpha(opacity=30);
-ms-filter: 'alpha (opacity=30)';
}

</style>

<img class="border_overlay" src="https://www.google.com/images/srpr/logo3w.png" width=160 height=160 alt="Image">
4

0 回答 0