Question

为了澄清我的照片所需的结果：

enter image description here

我确实希望背景图像覆盖整个屏幕，文本要靠近底部。

我想要一个透明的盒子，所以我可以把文字放进去。我在网上查了一下，但我希望修复背景并缩放以适应背景。此外，我希望背景图像的一部分在框中显示时是透明的，而不是框中的文本。这是我到目前为止提出的代码：

HTML：

<body>
<div class="background"> // I don't know if its even needed to include this
<div class="transbox">
            <p> Text here.
            </p>
            </div>
    </div>
    </body>

CSS：

background.div {
    background: url(myimage.jpg) no-repeat center center fixed;
    webkit-background-size: cover;
    moz-background-size: cover;
    o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
    -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
    background-repeat: no-repeat;
    color: white;
    font-family: Helvetica;

    div.transbox {
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
    div.transbox p {
    position: fixed;
    bottom: 0;
    width:100%;
    text-align: center;
    font-size: 65px;
   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: black;
   color: white;
}

Answer 1

使用rgba

:root{
    background:#342c74
}

.transbox{
    text-align:center;
    background-color: rgba(118, 126, 154, 0.5);
    border:4px solid #1f1a46
}

标记

<div class="transbox">
    <p> Text here.</p>
</div>

DEMO

透明框CSS

1 个答案: