首页 > 其他分享 >QD1-P25 CSS 背景

QD1-P25 CSS 背景

时间:2024-10-13 22:22:13浏览次数:7  
标签:repeat 重复 纵向 P25 背景图片 background QD1 CSS

本节学习:CSS 背景属性


本节视频

https://www.bilibili.com/video/BV1n64y1U7oj?p=25


  • 背景颜色

Clip_2024-10-13_14-18-42

  • 背景图片

不重复

Clip_2024-10-13_14-20-57

横向重复

Clip_2024-10-13_14-21-50

纵向重复

Clip_2024-10-13_14-22-47

双向重复

Clip_2024-10-13_14-23-42

  • 背景图片大小

400px

Clip_2024-10-13_14-24-47

600px

Clip_2024-10-13_14-25-09

原图大小

Clip_2024-10-13_14-26-28

  • 显示器宽度不够时,显示图片的一部分

Clip_2024-10-13_14-29-16

本节HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>P25-CSS背景</title>

		<style type="text/css">
			body {
				/* 设置元素的背景色 */
				background-color: #666666;
				/* 元素的背景图片,默认备机重复显示 */
				background-image: url("./src/示例照片2.png");
				/* 设置被禁图片是否重复
				 no-repeat  不重复
				 repeat-x 横向重复
				 repeat-y 纵向重复
				 repeat  横向纵向都重复
				 */
				background-repeat: repeat;
				/* 设置图片大小 */
				background-size:600px;
			}
		</style>
	</head>
	<body>

	</body>
</html>

示例照片2.png

示例照片2

标签:repeat,重复,纵向,P25,背景图片,background,QD1,CSS
From: https://blog.csdn.net/qq_38641599/article/details/142898347

相关文章

  • QD1-P12 HTML常用标签:表格
    本节学习HTML常用标签:表格标签table‍本节视频www.bilibili.com/video/BV1n64y1U7oj?p=12‍知识点1表格的基本结构<!DOCTYPEhtml><html> <head> <metacharset="utf-8"> <title>P12-表格标签</title> </head> <body> <!--......
  • Web前端开发入门学习笔记之CSS 43-47 --新手超级友好版-复合选择器+css特性篇
         Foreword写在前面的话: 大家好,我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得,希望能和同样在学习HTML的朋友们分享。由于我的知识有限,文章中可能存在错误或不准确的地方,欢迎大家在评论区提出建议和指正。我非常期待大家的反馈,以便......
  • 使用HTML和CSS实现3D波浪动画效果
    使用HTML和CSS实现3D波浪动画效果在本篇博客中,将详细介绍如何使用HTML与CSS创建一个3D波浪动画效果。这个效果不仅能够在网页中创建立体感强的视觉体验,还能够通过悬停和聚焦实现与用户的交互。我们将逐步解析代码中的每个部分,帮助你掌握其中的关键技巧。1.效果2.HTML......
  • [vue3 JavaScript CSS]实现电商网站商品预览,图片放大镜功能
    da效果预览:当鼠标浮在图片上时,灰色小框跟随鼠标运动。右侧大图显示。灰色框不会跑出图片,鼠标移动,右侧大图相应跟随移动。实现思路在实现前,我们想梳理一下我们要实现什么功能灰色框跟随鼠标移动,注意处理边界情况当鼠标进入时右侧大图出现,鼠标移出时右侧大图消失鼠标向左......
  • 前端知识整理(全屏播放器 CSS JavaScript 轮转播放 jquery库 AJAX 画布 网页测试)
    currenttime在前端开发中,“currenttime”通常指的是获取用户设备的当前时间。这可以通过JavaScript来实现,下面是一个简单的示例代码,展示如何获取并显示当前时间:<!DOCTYPEhtml><html><head><title>显示当前时间</title></head><body><h1>当前时间:</h1><pid="d......
  • 第五章 CSS盒模型
    盒模型是CSS定位布局的核心内容,页面中所有的元素都是放进一个容器内的,这个容器可以看成是一个盒子。可以通过CSS来控制这些盒子的各种显示属性,把这些盒子进行定位,完成整个页面的布局。在掌握了盒子模型以及其中每个元素的用法后,才能拥有较完善的布局观。5.1盒模型的定义web......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript游戏网站(英雄联盟)
    HTML+CSS+JS【游戏网站】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 记录工作开发日常遇到的问题点-css字体
    data.forEach((item,index)=>{style+=@font-face{font-family:'FileType${index}';src:url('${item.FileUrl}')format('truetype');}ht+=`});$('head').append($('<style>&......
  • CSS基础知识四(盒子绝对定位)
    目录1.绝对定位概念(absolute)2、绝对定位语法2.1代码添加 position:absolute;2.2创建一个HTNL结构2.3添加CSS属性2.3给div1加入绝对定位4.绝对定位练习4.1做出以下效果图1.绝对定位概念(absolute)    -当元素的position属性值设置为absolute时,就开启......
  • Web前端开发入门学习笔记之CSS 39-40 --新手超级友好版- 文本颜色字体篇
       Foreword写在前面的话: 大家好,我是一名刚开始学习HTML的新手。这篇文章是我在学习html过程中的一些笔记和心得,希望能和同样在学习HTML的朋友们分享。由于我的知识有限,文章中可能存在错误或不准确的地方,欢迎大家在评论区提出建议和指正。我非常期待大家的反馈,以便我能......