Question

HTML：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="script.js"></script>
    <title>Cool Effect</title>
</head>
<body>

    <div class="imageHolder">
        <span class="note">Hello!</span>
        <img src="picture1.jpeg">
    </div>

</body>
</html>

CSS：

.imageHolder {
    position: relative;
    border: 1px solid black;
    width: 300px;
    height: 250px;
    text-align: center;
    overflow: hidden;
    background-color: black;
}

.note {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid white;
    padding: 8px;
    color: white;
    opacity: 1;
    font-size: 24px;
    display: inline-block;
}

img {
    width: 300;
    opacity: 0.4;
    height: 250px;
}

小提琴：https://jsfiddle.net/xsqosw0c/1/

跨度中的文字看起来略微透明，而不是纯白色。我不确定为什么会这样。如果你把字体大小做得更清楚就更清楚了。

感谢。

Answer 1

这是因为文字在图像后面。使用z-index来解决此问题：

.note {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    border: 2px solid white;
    padding: 8px;
    color: white;
    opacity: 1;
    font-size: 24px;
    display: inline-block;

    z-index:2000;
}

z-index将元素向前或向后移动到CSS“图层”中。默认情况下，HTML元素将按照HTML代码中显示的顺序“分层”。您可以重新订购HTML行，也可以应用z-index

Answer 2

因为你的img已经超过了那段文字了

<div class="imageHolder">
    <img src="https://portthemedemo.files.wordpress.com/2014/06/bike.jpg?w=317&h=239&crop=1">
    <span class="note">Hello!</span>
</div>

为什么文字是透明的？

2 个答案: