CSS之背景样式及边框样式

news2024/12/24 20:28:27

1、背景样式

  • 常用属性：
    • background-color：背景颜色
    • background-image：背景图片
    • background-repeat：背景图片的平铺方式
    • background-position：背景图片的位置
    • background-attachment：背景图随滚动条的移动方式
  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS背景样式</title>
    <style>
        #div1{background-color: rgb(234, 22, 22); height: 100px; width: 200px;}
        #div2{background-color:aqua ; background-image : url(./dog.jpg); height: 300px; width: 300px;}
        #div3{background-color:rgb(132, 255, 0) ; background-image : url(./dog.jpg); height: 300px; width: 300px; background-repeat: repeat-x;}
        #div4{background-color:rgb(255, 255, 0) ; background-image : url(./dog.jpg); height: 300px; width: 300px; background-repeat: repeat-y;}
        #div5{background-color:rgb(255, 0, 255) ; background-image : url(./dog.jpg); height: 300px; width: 300px; background-repeat: no-repeat;}
    </style>
</head>
<body>
    <h2>测试容器1，颜色填充:</h2>
    <div id="div1"></div>
    <h2>测试容器2，图片填充，背景默认填充:</h2>
    <div id="div2"></div>
    <h2>测试容器2，图片填充，背景repeat-x填充</h2>
    <div id="div3"></div>
    <h2>测试容器2，图片填充，背景repeat-y填充</h2>
    <div id="div4"></div>
    <h2>测试容器2，图片填充，背景no-repeat填充</h2>
    <div id="div5"></div>
</body>
</html>
  • 结果展示
    在这里插入图片描述

2、滚动背景样式

  • 属性说明：
    • 背景图片默认属性：background-attachment: scroll
    • 滚动背景图片设置属性：background-attachment: fixed
  • 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滚动背景样式</title>
    <style>
        body{height: 2000px;}  /* 没有设置body大小，显示不出来 */
        #div1{background-image: url(./2.jpg); height: 50%; width: 100%; background-attachment: fixed;}/* 这里高和宽都也可以用px来设定 */
        #div2{background-image: url(./3.jpg); height: 50%; width: 100%; background-attachment: fixed;}/* 这里高和宽都也可以用px来设定 */
    </style>
</head>
<body>
    <div id="div1"></div>
    <div id="div2"></div>
</body>
</html>
  • 结果展示
    在这里插入图片描述

3、边框样式

  • border-style：边框的样式
  • border-width：边框的大小
  • border-color：边框的颜色
  • 针对一条边也可以单独设置
  • 代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>边框样式</title>
    <style>
        body{background-color: green;}
        #d1{height: 100px;width: 100px;border-color:red;border-top-style: dashed;border-bottom-style: dotted;border-right-style: double;border-left-style: solid;border-width: 3px;}
        #d2{height: 100px;width: 100px;border-color:rgb(255, 0, 251);border-style: dotted; border-width: 3px;}
        #d3{height: 100px;width: 100px;border-top-style: dashed;border-bottom-style: dotted;border-right-style: double;border-left-style: solid;border-width: 3px;border-top-color: aqua;
        border-bottom-color:blue;border-right-color: blueviolet;border-left-color: black;}
        #d4{height: 0px; width: 0px; /* 这里的宽高是指对于模块内部宽高，做三角型的话，这里宽高设置为0 */
            border-top-color: red;
            border-top-width: 30px;
            border-top-style: solid;
            border-bottom-color: transparent;/* transparent是透明色，这样设置不论网页背景是什么颜色，都可以隐藏不需要显式的边 */
            border-bottom-width: 30px;
            border-bottom-style: solid;
            border-right-color: transparent;
            border-right-width: 30px;
            border-right-style: solid;
            border-left-color: transparent;
            border-left-width: 30px;
            border-left-style: solid;}
        #d5{height: 0px; width: 0px; /* 这里的宽高是指对于模块内部宽高，做三角型的话，这里宽高设置为0 */
            border-top-color: transparent;
            border-top-width: 30px;
            border-top-style: solid;
            border-bottom-color: red;
            border-bottom-width: 30px;
            border-bottom-style: solid;
            border-right-color: transparent;
            border-right-width: 30px;
            border-right-style: solid;
            border-left-color: transparent;
            border-left-width: 30px;
            border-left-style: solid;}   
    </style>
</head>
<body>
    <h2>设置第一种边框样式：给每条边都设置样式</h2>
    <div id="d1"></div>
    <h2>设置第二种边框样式：整体边框设计</h2>
    <div id="d2"></div>
    <h2>设置第三种边框样式：给每条边设置颜色</h2>
    <div id="d3"></div>
    <h2>通过边框做一个向下的三角形：</h2><!-- 利用边框拼接的原理和透明颜色transparent -->
    <div id="d4"></div>
    <h2>通过边框做一个向上的三角形：</h2><!-- 利用边框拼接的原理和透明颜色transparent -->
    <div id="d5"></div>
</body>
</html>
  • 结果展示
    在这里插入图片描述

总结：

  • 背景设置可以指定对应模块，也可以给真个页面都设置，要注意style和对应div关联方式是通过#和id来关联相同关键字
  • 边框设置要注意边框样式、边框宽度、边框颜色的基础设置

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/77733.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

ADI Blackfin DSP处理器-BF533的开发详解19：LAN的网口设计（含源代码）

ADI Blackfin DSP处理器-BF533的开发详解19：LAN的网口设计（含源代码）

硬件准备 ADSP-EDU-BF533&#xff1a;BF533开发板 AD-HP530ICE&#xff1a;ADI DSP仿真器 软件准备 Visual DSP软件 硬件链接 功能介绍 BF533说实话用来做LAN的应用有些许勉强&#xff0c;因为他自己不带网口&#xff0c;要做的话&#xff0c;需要在总线上挂&#xff0c;那…
阅读更多...
3D视觉PnP问题

3D视觉PnP问题

文章目录背景和定义方法分类典型方法P3P(角锥法&#xff09;DLT单应性矩阵分解迭代法EPnP其他延伸总结背景和定义 目前常用的pnp方法有很多&#xff0c;但是本人学习和查阅后发现比较零散&#xff0c;因此&#xff0c;在这里将所学习的方法按照理解分类和总结&#xff0c;并且…
阅读更多...
体验了一下火爆全球的 ChatGPT，我惊呆了

体验了一下火爆全球的 ChatGPT，我惊呆了

这几天&#xff0c;要说编程圈最热的话题&#xff0c;莫过于OpenAI的ChatGPT&#xff0c;写小说&#xff0c;写代码&#xff0c;找BUG&#xff0c;写论文&#xff0c;画漫画&#xff0c;谱曲……简直没有它干不了的事。 趁着下班时间&#xff0c;我也光速注册体验了一下&#…
阅读更多...
深度整理总结MySQL——事务专辑

深度整理总结MySQL——事务专辑

事务前言什么是事务事务的特性事务的状态事务会引发什么问题&#xff1f;解决事物引发的问题手段事务日志Undo Log 日志简单介绍具体实现Buffer PoolBuffer Pool缓存什么&#xff1f;Redo Log日志为什么需要Redo Log?什么是 redo log&#xff1f;redo log要写入磁盘&#xff0…
阅读更多...
保姆级教程：手把手教你使用 Keras 搭建神经网络

保姆级教程：手把手教你使用 Keras 搭建神经网络

大家好&#xff0c;本文从0到1详细讲解两种基于Keras的建模方法&#xff1a; 基于Sequential的建模&#xff1b;快速方便&#xff0c;易上手 基于函数式API的建模&#xff1b;易于扩展&#xff0c;灵活性强 文章目录你会学到什么&#xff1f;技术提升导入内置数据集数据缩放和…
阅读更多...
【GRU回归预测】基于卷积神经网络结合门控循环单元CNN-GRU实现数据多维输入单输出预测附matlab代码

【GRU回归预测】基于卷积神经网络结合门控循环单元CNN-GRU实现数据多维输入单输出预测附matlab代码

✅作者简介&#xff1a;热爱科研的Matlab仿真开发者&#xff0c;修心和技术同步精进&#xff0c;matlab项目合作可私信。 &#x1f34e;个人主页&#xff1a;Matlab科研工作室 &#x1f34a;个人信条&#xff1a;格物致知。 更多Matlab仿真内容点击&#x1f447; 智能优化算法 …
阅读更多...
ChatGPT强悍的编程能力，让我吓出一身冷汗！

ChatGPT强悍的编程能力，让我吓出一身冷汗！

最近有好几个人给我安利ChatGPT&#xff0c;说老刘快你去看看吧&#xff0c;这货实在太强了&#xff0c;搞不好我们程序员都失业了。刚开始我都是微微一笑&#xff0c;怎么可能&#xff1f;我之前的观点一直都是在我的有生之年&#xff0c;AI绝对不可能干掉程序员。但是安利的人…
阅读更多...
一篇文章让你懂 io流

一篇文章让你懂 io流

文件&#xff1a;就是保存数据的地方。文件流&#xff1a;文件在程序中是以流的形式来操作的。流&#xff1a;数据在数据源&#xff08;文件&#xff09;和程序&#xff08;内存&#xff09;之间经历的路径。输入流&#xff1a;数据从文件&#xff08;磁盘&#xff09;到Java程…
阅读更多...
Spring-Cloud-Admin-06

Spring-Cloud-Admin-06

前言 admin是用来监控各个服务的状况的&#xff0c;通过前台页面&#xff0c;可以查看我们各个服务的一个状态&#xff0c;是否在线&#xff0c;服务状况的一个框架。 服务端项目使用 admin有服务端和客户端&#xff0c;我们不需要每个服务都导入admin的客户端依赖&#xff0c;…
阅读更多...
以太网 网络高可用性（链路聚合、LACP模式、静态手动模式）

以太网 网络高可用性（链路聚合、LACP模式、静态手动模式）

2.9.0 以太网 网络高可用性&#xff08;链路聚合、LACP模式、静态手动模式&#xff09; 网络高可用性2.9.0 以太网 网络高可用性&#xff08;链路聚合、LACP模式、静态手动模式&#xff09;一、简介&#xff1a;1、单板可靠性&#xff1a;1.1、实现机柜式的可靠性提升&#xff…
阅读更多...
Java#35（多线程扩展）

Java#35（多线程扩展）

目录 一.定时器 定时器是一种控制任务延时调用, 或者周期调用的技术 1.Timer定时器(不推荐) 2.ScheduledExecutorService定时器(推荐) 二.并发与并行 三.线程状态 一.定时器 定时器是一种控制任务延时调用, 或者周期调用的技术 1.Timer定时器(不推荐) 代码示范: import …
阅读更多...
Microsoft Store无法打开的解决办法【成功解决】

Microsoft Store无法打开的解决办法【成功解决】

Microsoft Store无法打开解决办法我自己的解决办法其他Bug导致Microsoft Store无法打开的解决办法vpn代理问题使用TLS 1.2其他BUG解决方案成功解决之前我就有安装wsl的想法&#xff0c;但是他要求打开Microsoft Store&#xff0c;我尝试了各种办法&#xff0c;都不行。今天终于…
阅读更多...
SpringCloud-全面详解（学习总结---从入门到深化）

SpringCloud-全面详解（学习总结---从入门到深化）

​​​​​​​ 微服务架构进化论 单体应用阶段 (夫妻摊位) 在互联网发展的初期&#xff0c;用户数量少&#xff0c;一般网站的流量也很少&#xff0c;但硬 件成本较高。因此&#xff0c;一般的企业会将所有的功能都集成在一起开发 一个单体应用&#xff0c;然后将该单体应用…
阅读更多...
Python代码加速100倍，针对Excel自动化处理的加速实战！

Python代码加速100倍，针对Excel自动化处理的加速实战！

并发 vs 并行 说到并发编程&#xff0c;我们先来澄清一下并发 (Concurrency) 和 并行 ( Parallelism)这两个概念&#xff0c;因为这个两个概念的含义是不同的。 并行&#xff08;Parallelism&#xff09;指的就是在同一时刻&#xff0c;有两个或两个以上的任务的代码在处理器…
阅读更多...
Spring Cloud Ribbon（负载均衡器）介绍及使用

Spring Cloud Ribbon（负载均衡器）介绍及使用

目前主流的负载方案分为以下两种&#xff1a; 集中式负载均衡&#xff0c;在消费者和服务提供方中间使用独立的代理方式进行负载&#xff0c;有硬件的&#xff08;比如 F5&#xff09;&#xff0c;也有软件的&#xff08;比如 Nginx&#xff09;。客户端自己做负载均衡&#x…
阅读更多...
[附源码]Python计算机毕业设计SSM基于框架的秧苗以及农产品交易网站（程序+LW)

[附源码]Python计算机毕业设计SSM基于框架的秧苗以及农产品交易网站（程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…
阅读更多...
命令设计模式

命令设计模式

一、命令模式 1、定义 命令模式&#xff08;Command Pattern&#xff09;是对命令的封装&#xff0c;每一个命令都是一个操作&#xff0c;请求方发出请求要求执行一个操作&#xff0c;接收方收到请求并执行操作。属于行为型设计模式。 命令模式通过在请求与实现之间引入一个抽…
阅读更多...
Spring注解开发

Spring注解开发

1、Spring注解开发 1 注解开发定义Bean对象【重点】 目的&#xff1a;xml配置Bean对象有些繁琐&#xff0c;使用注解简化Bean对象的定义 问题导入 问题1&#xff1a;使用什么标签进行Spring注解包扫描&#xff1f; 问题2&#xff1a;Component注解和Controller、Service、Re…
阅读更多...
【指纹识别】指纹识别【含GUI Matlab源码 029期】

【指纹识别】指纹识别【含GUI Matlab源码 029期】

⛄一、指纹识别简介 指纹识别技术主要分三个步骤&#xff1a;指纹预处理、特征提取、指纹分类与匹配。 无论是指纹分类还是指纹匹配,都需要提取指纹的有效特征,而特征提取的性能很大程度上要依赖于指纹图像的质量。在实际应用中,由于采集条件和采集设备的因素,采集到的指纹图像…
阅读更多...
IBRNet：基于IBR的NeRF

IBRNet：基于IBR的NeRF

IBRNet: Learning Multi-View Image-Based Rendering 针对问题&#xff1a;使NeRF具有泛化能力 如何做&#xff1a;主要还是针对颜色和密度的预测进行改进&#xff08;三维重建部分&#xff09;&#xff0c;和NeRF一样&#xff0c;使用的是volume rendering&#xff08;渲染部…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023