创建文本在背景图像上的透明框

最新推荐文章于 2024-11-01 10:52:38 发布

尼古拉斯-阳

最新推荐文章于 2024-11-01 10:52:38 发布

阅读量243

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_45020437/article/details/89919914

版权

本文介绍如何利用CSS技术，在背景图像上创建一个具有透明效果的文字框，以便于在美观的同时确保文本清晰易读。

摘要由CSDN通过智能技术生成

创建文本在背景图像上的透明框

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <style>
        div.background
        {
            width: 400px;
            height: 266px;
            margin:15px;
            background: url("fj.jpg") no-repeat;            border: 1px solid black;
            background-size:100% 100%;
        }

        div.transbox
        {
            width: 338px;
            height: 204px;
            margin:30px;
            padding:0;
            background-color: #ffffff;
            border: 1px solid black；
            filter:alpha(opacity=60);
            opacity:0.6;
        }

        div.transbox p
        {
            margin: 30px 40px;
            color: #000000;
            font:bold 12px Verdana, Geneva, sans-serif;
            line-height:1.5;
        }
    </style>
</head>

&