css怎么使用磨砂背景

2023-06-27 09:06:49 746人浏览安东尼

摘要

这篇文章主要介绍“CSS怎么使用磨砂背景”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css怎么使用磨砂背景”文章能帮助大家解决问题。代码实现<!DOCTYPE html>&l

这篇文章主要介绍“CSS怎么使用磨砂背景”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css怎么使用磨砂背景”文章能帮助大家解决问题。

代码实现

<!DOCTYPE html><html lang="en">    <head>        <meta charset="UTF-8">        <title>Document</title>        <style>                                        body {                                                background: url(demo.jpg) no-repeat center center fixed;                        background-size: cover;                         min-height: 100vh;                        box-sizing: border-box;                        margin: 0;                        padding-top: calc(50vh - 6em);                        font: 150%/1.6 Baskerville, Palatino, serif;                    }                                        .description{                        position: relative;                        margin: 0 auto;                        padding: 1em;                        max-width: 23em;                        background: hsla(0,0%,100%,.25) border-box;                        overflow: hidden;                        border-radius: .3em;                        box-shadow: 0 0 0 1px hsla(0,0%,100%,.3) inset,                                    0 .5em 1em rgba(0, 0, 0, 0.6);                        text-shadow: 0 1px 1px hsla(0,0%,100%,.3);                    }                                        .description::before{                        content: '';                        position: absolute;                        top: 0; right: 0; bottom: 0; left: 0;                        margin: -30px;                        z-index: -1;                        -WEBkit-filter: blur(20px);                        filter: blur(20px);                    }        </style>    </head>    <body>        <p class="description">        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.        </p>    </body></html>

总结

这种实现模式是考虑了性能来写的,以及维护上的考虑

比如使用了 em,可以很轻松的放大缩小整体大小
这里使用了 hsla,这是我第一次使用这个颜色值;以前只在 ps 调整这个,很不错的颜色模式.和 RGBA 大同小异,但是 HSLA 更符合人类眼睛的观看;
还学到了一种新的背景缩写方式

background-color:#ff0;background-image:url(background.gif);background-repeat:no-repeat;background-attachment:fixed;background-position:0 0;background-size:cover;background: #ff0 url(background.gif) no-repeat / fixed cover;

关于“css怎么使用磨砂背景”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网精选频道，小编每天都会为大家更新不同的知识点。

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: css怎么使用磨砂背景

本文链接: https://www.lsjlt.com/news/309443.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

css怎么使用磨砂背景

这篇文章主要介绍“css怎么使用磨砂背景”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“css怎么使用磨砂背景”文章能帮助大家解决问题。代码实现<!DOCTYPE html>&l...

99+

2023-06-27
CSS3如何实现磨砂玻璃背景效果

这篇文章主要为大家展示了“CSS3如何实现磨砂玻璃背景效果”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS3如何实现磨砂玻璃背景效果”这篇文章吧。效果图及实...

99+

2024-04-02
CSS多重背景数据块怎么使用

CSS多重背景数据块可以通过background属性来实现。具体操作如下：1. 使用background属性设置多个背景数据块。每个...

99+

2023-10-12

CSS
css怎么添加背景

这篇文章主要介绍了css怎么添加背景，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。css的三种引入方式1.行内样式，最直接最简单的一种，直接对HTML标签使用style=&q...

99+

2023-06-14
使用CSS怎么实现前景背景自动配色

本篇文章给大家分享的是有关使用CSS怎么实现前景背景自动配色，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。一、颜色匹配效果预览如下GIF示意，当我们按钮背景色逐渐变淡的时候，文...

99+

2023-06-08
怎么使用css让背景图片不重复

这篇文章主要介绍怎么使用css让背景图片不重复，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美化。它也是一种...

99+

2023-06-14
怎么用css设置背景颜色

本篇内容主要讲解“怎么用css设置背景颜色”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“怎么用css设置背景颜色”吧!我们先来看一个小例子吧，了解一下什么是背景...

99+

2024-04-02
css怎么设置背景图片和背景颜色

这篇文章主要讲解了“css怎么设置背景图片和背景颜色”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css怎么设置背景图片和背景颜色”吧！一、设置背景颜色：b...

99+

2024-04-02
CSS中背景样式background怎么用

这篇文章主要为大家展示了“CSS中背景样式background怎么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“CSS中背景样式background怎么用”这...

99+

2024-04-02
怎么用CSS创建波浪背景

这篇文章主要讲解了“怎么用CSS创建波浪背景”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“怎么用CSS创建波浪背景”吧！注：本文将使用before选择器轻松...

99+

2024-04-02
Css中的背景属性怎么用

小编给大家分享一下Css中的背景属性怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！1、背景包括背景颜色、背景图像背景颜色：...

99+

2024-04-02
css怎么把背景旋转

这篇文章主要介绍了css怎么把背景旋转，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。css的选择器有哪些css的选择器可以分为三大类，即id选择器、class选择器、标签选择...

99+

2023-06-14
css背景图片怎么加

非常抱歉，由于您没有提供文章标题，我无法为您生成一篇高质量的文章。请您提供文章标题，我将尽快为您生成一篇优质的文章。...

99+

2024-05-21
css怎么去掉背景色

这篇文章将为大家详细讲解有关css怎么去掉背景色，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言，主要是用来设计网页的样式，使网页更加美...

99+

2023-06-14
使用CSS实现流星雨背景

使用CSS实现流星雨背景？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。vue页面使用<template> <vi...

99+

2023-06-08
css的背景background怎么设置

今天小编给大家分享一下 css的背景background怎么设置的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我...

99+

2024-04-02
css怎么设置透明背景

小编给大家分享一下css怎么设置透明背景，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！css设置透明背景的方法：首先获取想要颜色值；然后把RBG值转换为数值；最后把值设置到css上，并且设置透明度即可，代码为【backgr...

99+

2023-06-14
css背景图代码怎么写

这篇文章主要讲解了“css背景图代码怎么写”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“css背景图代码怎么写”吧！1. css背景图1.1 背景属性<!DOCTYPE ht...

99+

2023-06-28
css怎么设置背景透明

这篇文章主要为大家展示了css怎么设置背景透明，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“css怎么设置背景透明”这篇文章吧。css是什么意思css是一种用来表现HTML或XML等文件样式的计算...

99+

2023-06-06
css怎么设置背景图片

css设置背景图片的方法：可以通过background-image属性设置背景图片。background-image属性用法格式。background-image:url(1.jpg);//url里是图片的路径示例：在html文件中css设...

99+

2024-04-02