CSS3（background）背景属性与文字阴影

最新推荐文章于 2024-04-21 02:21:10 发布
最新推荐文章于 2024-04-21 02:21:10 发布
阅读量1.6k 收藏 2
点赞数 1
分类专栏： css3 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50821119/article/details/111168658
版权

CSS3（background）背景属性

CSS（background）背景属性CSS（background）背景属性与文字阴影

背景简写顺序；

background-color

  • background-image
  • background-repeat
  • background-attachment
  • background-position/ [ background-size]
background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [ background-size] [background-origin] [background-clip];

background-color

background-color 属性定义了元素的背景颜色.

CSS中，颜色值通常以以下方式定义:

  • 十六进制 - 如："#ff0000"
  • RGB - 如：“rgb(255,0,0)”
  • 颜色名称 - 如：“red”

background-image

background-image 属性描述了元素的背景图像.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

页面背景图片设置实例:

<style>
body 
{
	background-image:url('paper.gif');
	background-color:#cccccc;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

背景图像 - 水平或垂直平铺

默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:

<style>
body
{
	background-image:url('gradient2.png');
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>

如果图像只在水平方向平铺 (repeat-x)

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}

如果图像只在垂直方向平铺 (repeat-y)

body
{
background-image:url('gradient2.png');
background-repeat:repeat-y;
}

background-repeat 设置定位与不平铺

让背景图像不影响文本的排版

如果你不想让图像平铺，你可以使用 background-repeat 属性:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}

以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。

可以利用 background-position 属性改变图像在背景中的位置:

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

background-attachment

background-attachment：如何指定一个固定的背景图像：

body
{ 
    background-image:url('smiley.gif');
    background-repeat:no-repeat;
    background-attachment:fixed;
}
值描述
scroll背景图片随着页面的滚动而滚动，这是默认的。
fixed背景图片不会随着页面的滚动而滚动。
local背景图片会随着元素内容的滚动而滚动。
initial设置该属性的默认值。
inherit指定 background-attachment 的设置应该从父元素继承。

background-size。

指定背景图像的大小：

  • 数值
  • 百分数
  • cover,铺满盒子，背景图片失真。
  • contain 等比例缩放图片，不会失真，但肯不会铺满盒子。
div
{	width:600px;
    height:200px;
    background:url(img_flwr.gif);
    background-size:80px 60px;
    background-repeat:no-repeat;
    border:2px solid red;
}

div{
    background-size:80px;只写一个值，代表背景图片宽度80px，背景图片高度自适应。
    background-size:80px 60px;背景图片宽度80px，背景图片高度60px。
    background-size:100%;一个百分数，表示高度，宽度都为盒子的宽高。
    background-size:10% 20%;2个百分数，表示背景宽度为盒子宽度的10%，高度为盒子高度的20%。
    background-size:cover;背景图片铺满div。但是图片大小会失真。
    background-size:contain;背景图片不会铺满,大小会自动缩放。
}

小练习 精灵图拼出一个love

图片如下在这里插入图片描述

代码如下：


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* div{
            background-image: url("img/bc1.jpg");
            width: 900px;
            height: 900px;
            background-color: rosybrown;
            background-repeat: no-repeat;
        } */
        div{
            float: left;
        }

        div:nth-child(1) {
            width: 80px;
            height: 180px;
            background: url(img/字母.jpg) no-repeat -550px -253px;
        }

        div:nth-child(2) {
            width: 120px;
            height: 180px;
            background: url(img/字母.jpg) no-repeat -142px -461px;
        }

        div:nth-child(3) {
            width: 120px;
            height: 180px;
            background: url(img/字母.jpg) no-repeat -250px -660px;

        }

        div:nth-child(4) {
            width: 120px;
            height: 180px;
            background: url(img/字母.jpg) no-repeat -600px -73px;

        }
    </style>
</head>

<body>
    <!-- background 
    
        综合写法：
            color image repeat attachment position
        background:red url("img/bs.jpg") no-repeat fixed 100px 200px;
    -->
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</body>

</html>

文字阴影

text-shadow
为文字添加阴影。可以为文字与 text-decorations 添加多个阴影，阴影值之间用逗号隔开。每个阴影值由元素在X和Y方向的偏移量、模糊半径和颜色值组成。

先看效果吧,可查看注释不同效果。

     <style>
      p {
            font-size: 32px;
            /* text-shadow: 1px 1px 2px pink; */
            /* text-shadow: #FC0 1px 0 10px; */
            /* text-shadow: 5px 5px #558ABB; */
            /* text-shadow: red 2px 5px; */
            /* text-shadow: 5px 10px; */
            text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue;
        }
     </style>
      
 <p>测试多重模糊文字阴影效果</p>

当阴影大于一个时要用逗号区别开阴影之间的参数。
三个参数

  • 第一个水平位移量，正数阴影向右，负数向左。
  • 第二个垂直位移量，正数阴影向下，负数向上。
  • 第三个时阴影模糊度。如果没有指定，则默认为0。值越大，模糊半径越大，阴影也就越大越淡。
  • 第四个颜色。

当所给的阴影大于一个时，阴影应用的顺序为从前到后, 第一个指定的阴影在顶部.

云杰8了
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Css样式-边框圆角/边框阴影/背景图片(background-image)显示颜色
广东松山职业技术学院 潘必成(网页制作学生)
12-22 1763
.tooltip{         background-color:#5c9bb7;         background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);         background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);         backg...
纯CSS3 3D动感文字动画特效
07-24
总结来说，纯CSS3 3D动感文字动画特效是通过CSS3的3D变换、渐变背景、文字阴影和动画关键帧等特性实现的。它不仅能够提升网页设计的视觉吸引力，还能在不依赖JavaScript的情况下提供流畅的用户体验。开发者需要掌握...
CSS：背景、阴影
读心悦
08-17 5557
当然，这并不是一直只设置这三个参数，有时候，可能不需要设置角度值，有时候也可能不需要设置多个颜色值，具体情况根据具体的需求来定。top），更大的值会沿着顺时针变化，因此90deg代表向右渐变，180deg代表向下渐变，360deg又会代表向上渐变。渐变是通过linear-gradient()函数来定义，一般情况下，是设置三个参数：角度、起始颜色、终止颜色。我们在写样式，设置背景效果的时候，是用到了background属性。当我们想要一个重复渐变的效果，但是又不想手动重复设置相同的颜色值的时候，可以通过。..
妙用 background 实现花式文字效果
最新发布
2401_84048807的博客
04-21 719
其实关于Kafka，能问的问题实在是太多了，扒了几天，最终筛选出44问：基础篇17问、进阶篇15问、高级篇12问，个个直戳痛点，不知道如果你不着急看答案，又能答出几个呢？若是对Kafka的知识还回忆不起来，不妨先看我手绘的知识总结脑图（xmind不能上传，文章里用的是图片版）进行整体架构的梳理梳理了知识，刷完了面试，如若你还想进一步的深入学习解读kafka以及源码，那么接下来的这份《手写“kafka”》将会是个不错的选择。Kafka入门为什么选择KafkaKafka的安装、管理和配置。
android 背景框加阴影,如何给android中的框添加阴影？
weixin_33379297的博客
05-26 506
试试这个代码， 我已经用两个布局完成，但您可以将其合并到一个 在XML文件中编写代码android:id="@+id/home_screen"android:layout_height="150dp"android:layout_width="fill_parent"android:layout_marginTop="50dp"android:background="@drawable/backg...
css background，box-shadow标签详解
LiangHui0914的博客
12-12 1317
写项目中，不能缺少的background，一直以来对它爱恨不明。总是记不住他的顺序。今天，好好总结一下：background: background-color background-image background-repeat background-position;background-position属性，取值： 我的理解是，容器相当于可视窗口，图片通过移动x,y方向上的位置，将想要展
21 圆角、背景、阴影
weixin_53971197的博客
08-03 37
实质上，每一个角上面，都有一个水平半径和一个垂直半径，如果每一个方向上的半径不同，则需要写成：水平半径/垂直半径。在css属性名之前添加 浏览器前缀，表示该css属性是浏览器的私有属性。宽度和高度可以是具体的数值，也可以是相对于所在元素的百分比。border-radius:左上 右上 右下 左下;border-radius:左上 右上 右下;设置多组阴影，使用英文逗号隔开，设置的方式一样。border-radius:左上 右上;border-radius:左上;如果只写一个宽度，高度按照比例渲染。
Html/CSS前端实现文字边框阴影效果
09-27
在这个例子中，`.text-shadow`类的`box-shadow`属性为文字添加了一个外阴影，使得文字看起来像是浮在深蓝色背景之上。 总的来说，通过灵活运用`box-shadow`属性，我们可以创造出各种各样的边框阴影效果，增强网页的...
CSS3鼠标悬停按钮阴影缩放特效
07-24
在网页设计中，CSS3（层叠样式表第三版）为开发者提供了丰富的视觉效果和交互体验，其中之一就是本文所提及的“CSS3鼠标悬停按钮阴影缩放特效”。这种特效可以使用户在鼠标悬停在按钮上时，按钮呈现出突出放大并带有...
CSS3背景、边框和边距相关属性演示案例
01-27
首先，我们来探讨CSS3的背景属性。背景属性允许我们自定义元素的背景颜色、图像、重复方式和定位。例如，`background-color`用于设置元素的背景色，如`background-color: #ff0000;`将背景设为红色。`background-...
CSS 文字加阴影变3D效果演示
12-03
下面我们将详细讨论如何利用CSS实现这种3D文字阴影效果。 首先，让我们分析一下提供的CSS代码： ```css .sample { font-style: italic; font-family: arial black; font-size: 40px; font-weight: bold; ...
CSS3与SVG实现文字背景动画炫酷特效源码.zip
11-02
这个"CSS3与SVG实现文字背景动画炫酷特效源码.zip"压缩包可能包含了一个示例项目，展示如何利用这两项技术来增强网页元素，特别是文字的表现力。以下是这些技术的关键知识点： 1. CSS3 动画： - `@keyframes` 规则...
CSS3蓝色渐变几何背景特效
06-24
"CSS3蓝色渐变几何背景特效"就是利用CSS3的特性，创造出独特且吸引人的文字背景布局。这个特效以蓝色渐变为基底，结合几何形状，为网页增加了一种现代感和专业感。 首先，我们要了解CSS3中的渐变（Gradient）。在...
全屏文字动画CSS3特效
04-06
其中，动画（animation）属性是CSS3的一大亮点，它包括了`@keyframes`规则和一系列与动画相关的属性，如`animation-name`、`animation-duration`、`animation-timing-function`等，使得开发者可以自定义复杂的动画...
纯CSS3绘制蓝色科技背景特效
06-24
2. **阴影（Shadows）**：CSS3的`box-shadow`和`text-shadow`属性可以为元素添加阴影效果，增加立体感和深度，让背景看起来更加立体。 3. **文字条纹**：通过`background-image`和`repeating-linear-gradient`，...
20种配合场景CSS3鼠标滑过文字背景动画特效
11-17
3. 阴影效果：`text-shadow`属性可以创建文字阴影，增加立体感。通过调整阴影的颜色、偏移量和模糊度，可实现各种动态效果。 4. 文字描边动画：通过`stroke`和`stroke-width`属性，可以对文本进行描边，并用`...
CSS基础知识（五）CSS背景 阴影及圆角边框
weixin_65548623的博客
04-20 5091
文章目录一、CSS背景属性1.背景颜色（background-color）2.背景图片（background-image）3.背景平铺（background-repeat）4.背景图片位置（background-position）5.背景图片固定（background-attachment） 一、CSS背景属性 1.背景颜色（background-color） 属性值：transparent(透明的)或color(颜色) 2.背景图片（background-image） 属性值：none(没有)或url
安卓 做一个简单的背景阴影
github_38163856的博客
02-26 1259
通常给一些view加上阴影效果会使页面效果更好。这里只对21以上的机子经行说明，经市场统一21一下的手机已经不足市场份额的20% 所以，如果你的 App 的 minSdkVersion 就是 21 的话，直接使用这两个属性是最优的解决办法。 elevation 属性 elevation 属性，主要用于给 View 增加一个高度，可以直接被加在 View 控件上，呈现在界面上，就是一...
background-image实现文字下边带阴影或颜色
丽丽大神ing的博客
01-09 782
p{ display: inline-block; font-size: 20px; line-height: 1.5; margin: 0; color: #000; background-image: linear-gradient(180deg,transparent 70%,rgba(249...
CSS3 transition属性详解与应用
CSS3的其他新技术还包括但不限于：多列布局（column-count、column-gap等）、圆角边框（border-radius）、阴影效果（box-shadow）、渐变（linear-gradient、radial-gradient）、文字阴影（text-shadow）、边框图片...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值