想要你的网站页面看起来高端感十足吗?-开发网

想要你的网站页面看起来高端感十足吗？想要提升你网页的阅读文章浏览量吗？想要你的消费者一眼便被你页面吸引吗？那就千万不要错过文中啦！终究既简单快速地完成现代感模糊不清的背景图，谁都能懂得！

话不多说，逐渐文章正文！

如同文章标题所说我们现在所需推荐的就是利用css来创建一个模糊不清的背景图像，可用于自己个人博客网站网页页面，同样适用于网址环境。

下面我就直接用编码：

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title></title>
<style>
    body, html {
        height: 100%;
        margin: 0;
        font-family: Arial, Helvetica, sans-serif;
    }
    * {
        box-sizing: border-box;
    }
    .bg-image {
        /* 所使用的图象 */
        background-image: url("001.jpg");

        /* 加上模糊特效 */
        filter: blur(8px);
        -webkit-filter: blur(8px);

        /* 完整的相对高度 */
        height: 100%;

        /* 中心和放大图象*/
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    /* 将文字放置于网页页面/图像正中间 */
    .bg-text {
        background-color: rgb(0,0,0); 
        background-color: rgba(0,0,0, 0.4); 
        color: white;
        font-weight: bold;
        border: 3px solid #f1f1f1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2;
        width: 80%;
        padding: 20px;
        text-align: center;
    }
</style>

</head>
<body>
<div class="bg-image"></div>
<div class="bg-text">
    <h2>欢迎走进</h2>
    <h1 style="font-size:50px">虚拟现实技术</h1>
    <p>一切都是虚拟，但我觉得还是真正</p>
</div>
</body>
</html>

实际效果如图所示：

想要你的网站页面看起来高端感十足吗?

（背景图片来自网络，侵删歉）

如何！作用是否非常好！

那样在相关编码中，为大家介绍好多个关键性的css属性：

filter 属性定义了原素(一般是<img>)的可见功效(比如：模糊不清与对比度)。

注：老版 Internet Explorer 电脑浏览器(4.0 to 8.0) 鼓励的非标 "filter" 特性已经被废旧。 IE8 及更低版电脑浏览器通常采用 opacity 特性。

transform特性向原素运用 2D 或 3D 变换。该特性容许对于原素开展转动、放大、挪动或歪斜。

border缩写特性在一个申明设定每一个外框特性。

border-width：要求外框的宽度。
border-style：要求外框的样式。
border-color：要求外框颜色。
inherit：要求应当从父元素传承 border 属性设定。

background缩写特性在一个公告中设定每一个环境特性。

background-color：要求要所使用的背景色。background-position：要求背景图像位置。background-size：要求环境图片的尺寸。background-repeat：要求怎样反复背景图像。
background-origin：要求背景图案定位地区。background-clip：要求背景制作地区。background-attachment：要求背景图像是不是固定不动或是伴随着界面的其他部分翻转。background-image：要求要所使用的背景图像。inherit：要求应当从父元素传承 background 属性设定。

AdminJS服务平台有很多的在线视频教学网络资源，欢迎各位学习培训《css视频教程》！

以上就是关于用CSS迅速建立高端模糊不清氛围的背景图像的具体内容，大量欢迎关注AdminJS其他类似文章！

标签：

原文地址：想要你的网站页面看起来高端感十足吗?发布于2023-05-29 13:45:02