05：CSS设置背景样式

最新推荐文章于 2021-07-27 04:05:16 发布
最新推荐文章于 2021-07-27 04:05:16 发布
阅读量351 收藏
点赞数
文章标签： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fighting_0808/article/details/81782288
版权

1.为内容设置背景色：background-color；
属性：
颜色；
inherit;继承父级样式

box.html

<!doctype html>
<html>
<head>
    <mate charset="utf-8">
    <title>背景</title>
    <link href="box.css" type="text/css" rel="stylesheet">

</head>
<body>
    <p为内容设置背景色：background-color；</p>
</body>
</html>

box.css

body{
    background-color:#123456;
}

2.为内容设置背景为图片background-image：url();
box.css

body{
    background-color:#123456;
    background-image:url(image.png);
}

3.固定背景图片background-attachment
（在CSS中使用 background-attachment属性可以将图片固定在浏览器上，如果拖动滚动条，背景图片不会随着网页内容的滚动而滚动，像文字浮在图片上）
属性值：
scroll;背景图片随内容滚动,默认值
fixed; 背景图片固定，不随内容滚动
inherit;继承父类样式

box.css

body{
    background-color:#123456;
    background-image:url(image.png);
    background-attachment:fixed;
    font-size: 45px;
}

4.背景图片平铺background-repeat;
属性值：
repeat;平铺背景图片；默认
no-repeat;不平铺图片；
repeat-x;在水平方向平铺
repert-y;在竖直方向平铺

box.css

 body{
    background-color:#123456;
    background-image:url(image.png);
    background-attachment:fixed;
    font-size: 45px;
    background-repeat: repeat-y;    
}

5.背景图片定位background-position
属性值：
top;顶部
center;中间
bottom;底部
right;右边
left;左边
inherit;继承父类样式
样式：
xxxpx,xxxpx;
xxx%,xxx%;
xxxpx,top;

box.css

body{
    background-color:#123456;
    background-image:url(image.png);
    background-attachment:fixed;
    font-size: 45px;
    background-repeat:no-repeat;
    background-position:left;
}
                     19:13 2018/8/17/周五
布吉
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
前端学习 -- Html&Css -- 背景
A08110123的博客
05-16 1440
background 在一个声明中设置所有的背景属性。background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。background-color 设置元素的背景颜色。background-image 设置元素的背景图像。background-position 设置背景图像的开始位置。background-repeat 设置是否及如何重复背景图像...
php文件怎么加入图片,css 怎么引入图片文件
weixin_36390615的博客
03-18 1800
css引入图片文件的方法：1、通过“background-image:url(图片地址)”方法来引入；2、使用“background:url(图片地址)”方法来引入图片，展现到网页中即可。本教程操作环境：Dell G3电脑、Windows7系统、HTML5&&CSS3版本。css引入图片文件在CSS中，可以用background-image:url(你的图片地址)或backgrou...
html和css之背景样式详解
Deng872347348的博客
01-14 227
背景样式详解 opacity和display的区别 opacity设置的是透明度，值的范围是0~1，0代表完全透明，1代表不透明 display为none，浏览器就不会渲染这个元素。 一个元素设置为display为none后想让他在显示出来使用，display:原来的显示类型； 背景颜色的显示区域 内容区+padding+border 背景图片 background-image: url(‘图片地址’) ; div{ background-image: url(
『HTML&CSS』背景样式
叄拾叄画生
10-17 1064
透明背景。背景样式。按钮练习。雪碧图制作。
使用css的background:url设置背景图方法
09-25
在网页设计中，设置背景图是常见的视觉呈现方式，CSS（Cascading Style Sheets）提供了丰富的样式控制，其中`background`属性就是用来定义元素背景的关键。在这个话题中，我们将深入探讨如何使用`background:url()`...
形考任务四活动1：采用CSS样式来设置背景、标题和段落的颜色。.zip
11-24
在本形考任务四中，我们关注的核心是利用CSS（Cascading Style Sheets）样式来增强HTML文档的视觉效果，具体来说就是设置背景颜色、标题颜色以及段落颜色。这是一项基础但至关重要的技能，对于网页设计和开发来说是...
css控制背景示例(css设置背景图片、设置背景颜色)
09-25
【CSS背景控制】在网页设计中，CSS（Cascading Style Sheets）被广泛用来控制页面元素的样式，其中背景设置是重要的一部分。本篇主要探讨如何利用CSS来设置背景颜色和背景图片。 **一、设置背景颜色** 1. **十六...
【css背景图片自适应】css怎么设置背景图片自适应大小
最新发布
04-11
在css中，可以利用“background-size”属性设置背景图片自适应大小，该属性用于设置背景图片的大小，只需要给背景图片元素添加“background-size:cover;”样式，即可使背景图片的大小自适应。
css 设置全屏背景图片
09-25
但是，传统的CSS属性对于背景图片的控制有限，无法直接实现图片的全屏拉伸，仅能通过设置图片是否重复、位置及重叠方向等选项来控制背景图片的表现。 在CSS2中，若要实现背景图片全屏拉伸的效果，我们需要借助HTML...
html如何将图片弄成背景,如何用css把图片弄成背景
weixin_34928052的博客
07-01 2534
用css把图片弄成背景的方法：首先创建一个HTML示例文件；然后在body中添加一些p标签；最后使用css中的background属性将图片设置为背景即可。本教程操作环境：Windows7系统、css3版，DELL G3电脑。可以使用css中的background属性将图片设置为背景，background可以在一个声明中设置所有背景属性。可以设置的属性分别是：background-color、ba...
CSS——（5）背景
ileopard的博客
08-29 261
一、背景颜色和背景图片 主要有以下属性 background-color 背景颜色 background-image 背景图片 （url(“图片路径”)） background-repeat 背景是否重复 background-position 设置背景图片的位置 background-size 设置背景图片的大小 background-origin 背景图片的偏移量 计算的原点 background-clip 设置背景图片的范围 backgr
CSS样式设置网页背景
qq_41377400的博客
12-16 6608
首先我们要知道在HTML、CSS里面，有关背景的设置都与background有关，比如background-color：background-image：等 1、background-color属性-设置背景颜色 语法：background-color：颜色； 这里的颜色可以直接用颜色名字，也可以使用三元色、十六进制等； 如：background-color:rgba（0,0,0,.8）;
html背景图片css怎么添加,css样式怎么插入背景图片？
weixin_33380613的博客
06-04 6875
css样式怎么插入背景图片？下面本篇文章给大家介绍一下。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。在css中，给html元素添加背景图，主要通过background-image属性来设置。background-image 属性设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界(但不包括边距)。默认情况下，background-image放置在元素的左上角，并重复...
CSS背景样式
qq_39301366的博客
09-07 5594
1.background-color 设置元素的背景颜色。     background-color：颜色/transparent     说明：transparent是全透明                 颜色值（颜色名/RGB/十六进制）                 背景区包括内容、内边距（padding）和边框（border）、不包含外边距（margin） 2.background-...
css设置背景图片样式
Lccccb的博客
04-08 9350
background-image: url('../../../assets/image/img/400.png'); background-repeat: no-repeat; /*不平埔*/ background-position:50% 50% ; /*居中*/ background-size:50% 50%; /*背景图片大小*/ ...
css背景设置
Public places
07-26 318
注：所有的代码都在&lt;style&gt;&lt;/style&gt;中实现 背景色 background-color：/*颜色*/； 背景图片 background-image：/*图片详情*/； 背景图片大小 background-size: ; 图片平铺（重复） background-image: url(tupian.jpg); background-repeat...
计算机里的文案怎么设置背景,PPT怎么设置单个幻灯片为背景样式4？网友：原来这么简单！...
weixin_39779467的博客
07-27 865
原标题：PPT怎么设置单个幻灯片为背景样式4？网友：原来这么简单！相信有的朋友在做计算机一级题库的时候以及平时工作的时候会碰到关于PPT中的一个小问题，就是设置PPT中单个幻灯片为背景样式4。其实这个小问题在我准备考计算机一级的时候也碰到过，当时也是第一次碰到过这个问题，然后不知道怎么做就去百度，后来发现百度上也没有，便开始自己摸索，摸着摸着就找到了，就知道怎么做了，相信也会有像我一样的朋友在寻找...
如何在html中加入背景,css如何添加背景？
weixin_31231693的博客
05-30 1140
在CSS中，可以使用背景系列属性(background、background-color、background-image)来定义HTML元素的背景。下面本篇文章就来给大家介绍一下，希望对大家有所帮助。css添加背景的相关属性background-color属性设置元素的背景颜色，用于添加纯色背景。background-image属性为元素设置背景图像。background简写属性在一个声明中设置...
代码：css设置链接中的按钮的样式
04-03
以下是一些常见的 CSS 样式，可以用于设置链接中的按钮样式： 1.按钮的背景颜色和文本颜色： ```css button { background-color: #4CAF50; color: white; } ``` 2.按钮的边框样式和边框颜色： ```css button { border: 2px solid #4CAF50; } ``` 3.按钮的圆角半径： ```css button { border-radius: 5px; } ``` 4.按钮的阴影效果： ```css button { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3); } ``` 5.按钮的悬停效果： ```css button:hover { background-color: #3e8e41; } ``` 6.按钮的禁用状态： ```css button:disabled { opacity: 0.6; cursor: not-allowed; } ``` 这些样式可以根据需要进行组合和修改，以创建适合您网站风格的自定义按钮。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值