CSS 背景

最新推荐文章于 2024-01-15 15:49:19 发布
最新推荐文章于 2024-01-15 15:49:19 发布
阅读量240 收藏
点赞数
分类专栏： CSS CSS 实例 文章标签： CSS 背景 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lengyuezuixue/article/details/80522318
版权

设置页面的背景颜色

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			body {
				background-color:#b0c4de;
			}
		</style>
	</head>
	<body >
		<h1>我的CSS WEB 页!</h1>
		<p>你好！</p>
	</body>
</html>

设置不同元素的背景颜色

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			h1 {
				background-color:#6495ed;
			}
			
			p {
				background-color:#e0ffff;
			}
			
			div {
				background-color:#b0c4de;
			}
		</style>
	</head>
	<body >
		<h1>CSS background-color 实例!</h1>
		<div>
			该文本插入在 div 元素中
			<p>该段落有自己的颜色</p>
			我们仍然在同一个 div 中。
		</div>
	</body>
</html>

设置一个图像作为页面的背景

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			body {
				background-image:url("logo.gif");
				background-color:#cccccc;
			}
		</style>
	</head>
	<body >
		<h1>Hello World</h1>
	</body>
</html>

错误的背景图片

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>自学教程(如约智惠.com)</title> 
<style>
	body {background-image:url('bgdesert.jpg');}
</style>
</head>

<body>
<h1>Hello World!</h1>
<p>该文本不容易被阅读。</p>
</body>

</html>

如何在水平方向重复背景图像

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			body {
				background-image:url("logo.png");
				background-repeat:repeat-x;
		</style>
	</head>
	<body >
		<h1>Hello World</h1>
	</body>
</html>

如何定位背景图像

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			body {
				background-image:url("img_tree.png");
				background-repeat:no-repeat;
				background-position:right top;
				margin-right:200px;
		</style>
	</head>
	<body >
		<h1>Hello World</h1>
		<p>背景图片不重复，设置position实例.</p>
		<p>背景图片只显示一次，并与文本分开</p>
		<p>实例中还添加了margin-right 属性用于让文本与图片隔开。</p>
	</body>
</html>

一个固定的背景图片

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			body {
				background-image:url("smiley.gif");
				background-repeat:no-repeat;
				background-attachment:fixed;
		</style>
	</head>
	<body >
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
		<p>背景图片是固定的。尝试向下滚动页面。</p>
	</body>
</html>

在一个声明的所有背景属性

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			body {
				background:#ffffff url('img_tree.png') no-repeat right top;
				margin-right:200px;
		</style>
	</head>
	<body >
		<h1>Hello World!</h1>
		<p>背景图片只显示一次,但它位置离文本比较远。</p>
		<p>在这个例子中我们添加了一个右边距,所以背景图像不会打扰到文本。</p>
	</body>
</html>

高级的背景例子

<!DOCTYPE html>
<html>
	<head>
		<title>自学教程(如约智惠.com)</title>
		<meta charset="utf-8">
		<style>
			body {
				background:#5d9ab2 url('img_tree.png') no-repeat top left;
				margin-left:200px;
			}
			
			.container {
				text-align:center;
			}
			
			.center_div {
				border:1px solid gray;
				margin-left:auto;
				margin-right:auto;
				width:90%;
				background-color:#d0f0f6;
				text-align:left;
				padding:8px;
			}
		</style>
	</head>
	<body >
		<div class="container">
			<div class="center_div">
				<h1>Hello World!</h1>
				<p>This example contains some advanced CSS methods you may not have learned yet. But, we will explain these methods in a later chapter in the tutorial.</p>
			</div>
		</div>
	</body>
</html>

参考：

https://www.yuque.com/docs/share/029800d4-5a4d-4cf6-9280-90107711bf36

冷月醉雪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS背景
MOOG007的博客
08-17 710
通过CSS背景属性，可以给页面元素添加背景样式 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等 背景颜色 background-color属性定义了元素的背景颜色 一般情况下 background-color的默认值是transparent（透明），我们可以手动指定背景颜色为透明 CSS背景 超大背景图片将图片中核心内容显示在盒子中间，两侧看不见了，但是屏幕变大后会看见两侧的部分 背景图片的应用：小的装饰图片、超大背景图片 视差滚动 .
利用css将视频作为背景图片
zhh_5的博客
08-25 6640
css视频做背景图片自动播放
css如何创建视频背景
A12536365214的博客
07-31 3878
1.首先，准备你的视频文件：将你的视频文件（通常是.mp4格式）准备好，并确保它已经上传到你的网站或服务器上。这样，当你打开HTML文件时，就会看到视频作为背景自动播放，而其他内容则会在其上方显示。要在网页中创建一个视频背景，你可以使用CSS和HTML来实现。你可以根据自己的需求调整样式，比如添加其他内容区域（比如文字、按钮等），使用。3.使用CSS设置视频背景样式：在CSS文件中，你可以设置。设为-1，这样它会位于其他内容的下方，作为背景。标签的样式，使其铺满整个屏幕并作为背景显示。
css设置background背景视频
最新发布
Eros1on_Kk的博客
01-15 2044
在上述代码中，我们使用了CSS3的video标签来设置背景视频，并通过设置z-index属性将其置于最底层。为了让视频静音，我们使用了伪元素和Webkit的CSS属性来隐藏视频控件和文本轨道。这样就可以在网页中插入背景视频了。需要注意的是，由于视频的加载和播放可能会影响网页性能，建议使用较小的视频文件，并对视频进行压缩和优化。要在网页中插入背景视频，可以使用CSS3的background-size属性和background-video属性。4.在CSS中设置z-index属性，确保视频在其他元素的下方。
CSS技巧系列--使用视频作为背景
热门推荐
程麒阁的博客
01-22 2万+
有一些官方网站为了弘扬他们的企业文化，往往会拍一些记录短片。如果能把这些记录短片放在公司的官方网站上，既能体现公司的企业文化又能给网站提供更加绚丽的视觉享受
HTML+CSS实现视频背景页面
woloveself的博客
06-29 1852
【代码】HTML+CSS实现视频背景页面。
css 背景图片平铺技巧
12-09
使用css来设置背景图片同传统的做法一样简单，但相对于传统控制方式，css提供了更多的可控选项，我们先来看看最基本的设置图片的方法。xhtml代码： 复制代码代码如下:”content”> </div> css代码： 复制代码代码...
css背景颜色透明背景图片切换效果
12-07
在本主题中，“css背景颜色透明背景图片切换效果”涉及的是如何利用CSS实现一种动态效果，即当用户交互时，网页背景颜色逐渐变为透明，并同时切换到不同的背景图片。这种效果可以增加用户体验的趣味性和互动性，常被...
全屏视频背景：HTML和CSS
02-07
全屏视频背景 HTML和CSS
全屏视频背景的html
04-25
css+html实现全屏视频背景+响应式布局。简易入门，方便直接使用
CSS视频教程设置网页背景
08-24
这是第5课，之前已经有4课了，这一课是介绍网页背景的设置，好了，今天就上传4课，以后会陆续把所有珍藏的视频共享出来的。
CSS 背景全攻略
09-25
这篇文章将深入探讨CSS背景的各个方面，包括基本属性、技巧以及CSS3的新特性。 首先，CSS2中的背景属性包括五个主要部分： 1. **背景色 (background-color)**：此属性允许设置元素的背景颜色。可以通过颜色名称、...
CSS 背景渐变
10-10
CSS 设计指南学习小结
CSS之实现视频背景
罗毅豪的博客
09-12 292
1.新增<video> <video class="video-background" autoplay muted loop> <source src="../../assets/starry-sky.mp4" type="video/mp4" /> Your browser does not support the video tag. <...
vue3中【html+css】背景设置为视频并铺满整个页面
m0_67986791的博客
03-03 4349
object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。标签默认不是铺满的，手动设置宽高100%也不会生效，当需要video铺满div时，加上一个css样式。object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度。fill: 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
H5+CSS3实现官网首页--视频全屏背景
不想学习的打工人的博客
10-20 1446
H5+CSS3实现官网首页--视频全屏背景
css背景镂空
06-02
要实现CSS背景镂空的效果，可以使用CSS3中的属性：`background-clip`和`background-color`，具体实现方法如下： 1. 首先在HTML中创建一个元素，比如一个`<div>`元素。 2. 在CSS中添加以下代码： ``` div { background-image: url('your_background_image.png'); background-size: cover; background-color: transparent; background-clip: content-box; } ``` 3. 解释一下上述代码中各个属性的含义： - `background-image`：指定元素的背景图片； - `background-size`：指定背景图片的大小，这里使用`cover`表示图片会被拉伸或缩放以适应元素的大小； - `background-color`：指定元素的背景色为透明，这是实现镂空效果的关键； - `background-clip`：指定元素的背景裁剪方式，这里使用`content-box`表示只裁剪内容区域，不包括边框和内边距。 通过以上代码，你就可以实现CSS背景镂空的效果了。注意，这种方法只适用于单色背景图片，如果是多色图片，可能会出现一些意料之外的效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值