背景图

css背景图撑开盒子高度

由 孤人 提交于 2020-01-03 13:30:29
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图撑开盒子高度</title> <style> .bg-box { background-image: url(../demo.jpg); background-size: 100% 100%; background-repeat: no-repeat; margin:0 auto; } .bg-box::after { content: ""; display: block; /*这里的padding = height / width*/ padding:20%; } </style> </head> <body> <div class="bg-box"></div> </body> </html> 来源： https://www.cnblogs.com/yesyes/p/6952249.html

CSS 背景

由 ╄→尐↘猪︶ㄣ 提交于 2019-12-24 15:36:32
　　CSS 可以添加背景颜色和背景图片，以及来进行图片设置。 　　说明： 样式 说明 background-color 定义背景颜色 background-image 定义背景图片 background-repeat 定义背景图是否平铺和平铺方式 background-position 定义背景图片位置 background-attachment 定义背景图显示方式 background-size 定义背景图的大小 background-clip 定义背景的裁剪区域 background-origin 定义背景的显示区域 一、background-color 背景颜色 　　可以使用该属性给一个元素定义背景颜色。 　　语法： background-color: color值; 　　 color 值可以是颜色单词，十六进制等 W3C 允许的颜色值。 　　 背景透明（CSS3）： 　　语法： background: rgba(0,0,0,0.3); 　　 最后一个参数是alpha 透明度 取值范围 0~1之间。 　　 Tips ： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。 二、background-image 背景图像 　　该样式属性用于设置背景图片。 　　语法： background-image : none | url (url) none：表示默认值，没有背景图；

CSS背景样式设计简单介绍

由 微笑、不失礼 提交于 2019-12-23 00:31:49
1. 背景颜色 background属性设置了背景颜色，页面的背景颜色色使用在body的选择器中，实例： body { background-color : #b0c4de ; } CSS中，颜色值通常以以下方式定义: 十六进制 如："#ff0000" RGB 如：“rgb(255,0,0)” 颜色名称 如：“red” 2.背景图像 background-image描述了元素的背景图像 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体，实例： body { background-image : url(paper.gif) ; } 若是想水平或垂直平铺 如果图像只在水平方向平铺 (repeat -y),代码如下： body { background-image : url(paper.gif) ; background-repeat : repeat -x ; } 如果图像只在垂直方向平铺 (repeat -y),代码如下： body { background-image : url(paper.gif) ; background-repeat : repeat -x ; } 若不想平铺 body { background-image : url(paper.gif) ; background-repeat : no-repeat ; } 设置背景图片的位置

小程序设置背景图

由 |▌冷眼眸甩不掉的悲伤 提交于 2019-12-19 05:07:04
当在wxss中使用background:url("../XXX.jpg")来获取本地图片作为背景图的时候会报错： xxx.wxss中的本地资源图片无法通过wxss获取，可以使用网络图片或者base64，或者<image />标签。 其实人家已经把解决方式都告诉我们了，只是一开始不知道怎么将自己的本地图片弄成一张网络图片并获取URL （base64太长，不想用；<image>标签定位，设置z-index即可） 其中一种方法是： 将图片上传到你QQ 空间（相册），F12，找到图片路径，然后将之放到background-image即可 来源： CSDN 作者： hst_gogogo 链接： https://blog.csdn.net/hst_gogogo/article/details/103601658

第04组 团队Git现场编程实战

由 末鹿安然 提交于 2019-12-18 02:40:26
组员职责分工 成员 分工 鲍子涵 分配职责，整合代码 吴宜航 UI设计与实现 钟博 UI设计与实现(Main Coder) 黄海东 数据整理 王镇隆 前端api接口分析和使用(Main Coder) 高鹏 api接口分析和整理 骆友鹏 数据整理 陈志明 api接口分析和整理 刘俊杰 数据整理 罗继鸿 数据整理 林得翔 特殊情况，请假未参与 GitHub提交日志 程序运行截图 程序运行环境 java version "1.8.0_221" Java(TM) SE Runtime Environment (build 1.8.0_221-b11) Java HotSpot(TM) 64-Bit Server VM (build 25.221-b11, mixed mode) GUI界面 准备工作：提前先收集好几张编程时可能会用到的UI的背景图还有一些要插入的小部件。 具体编程完成的工作：在主题明确了以后选取了以原谅色为主题的背景图，但是由于背景之间的风格色调有些偏差，所以用了pscc把原来的背景图用camera row把背景的色调给调柔和了些，本来现场想p些小部件到背景里去，但奈何时间不够就先凑合着用了，背景图的插入用的是Jpanel进行背景图插入。 开始界面 打开最受欢迎的商圈的页面 打开各价位性价比前五的页面 打开最佳美食聚集地的页面 打开服饰类综合评分最高的页面 基础功能实现

第04组 团队Git现场编程实战

由 会有一股神秘感。 提交于 2019-12-18 00:34:14
组员职责分工 成员 分工 鲍子涵 分配职责，整合代码 吴宜航 UI设计与实现 钟博 UI设计与实现(Main Coder) 黄海东 数据整理 王镇隆 前端api接口分析和使用(Main Coder) 高鹏 api接口分析和整理 骆友鹏 数据整理 陈志明 api接口分析和整理 刘俊杰 数据整理 罗继鸿 数据整理 林得翔 特殊情况，请假未参与 GitHub提交日志 程序运行截图 程序运行环境 java version "1.8.0_221" Java(TM) SE Runtime Environment (build 1.8.0_221-b11) Java HotSpot(TM) 64-Bit Server VM (build 25.221-b11, mixed mode) GUI界面 准备工作：提前先收集好几张编程时可能会用到的UI的背景图还有一些要插入的小部件。 具体编程完成的工作：在主题明确了以后选取了以原谅色为主题的背景图，但是由于背景之间的风格色调有些偏差，所以用了pscc把原来的背景图用camera row把背景的色调给调柔和了些，本来现场想p些小部件到背景里去，但奈何时间不够就先凑合着用了，背景图的插入用的是Jpanel进行背景图插入。 开始界面 打开最受欢迎的商圈的页面 打开各价位性价比前五的页面 打开最佳美食聚集地的页面 打开服饰类综合评分最高的页面 基础功能实现

03HTML5学习之视觉元素与图像

由 喜欢而已 提交于 2019-12-17 01:22:56
文章目录 1、配置线条与边框 水平分隔线元素 边框属性与间距属性 边框属性 边框样式属性 内边距属性 2、图像类型 图片互换格式（GIF）图片 透明度 动画 压缩 优化 交错 联合照片专家小组（JPEG）图像 压缩 优化 渐进式JPEG 可移植网络图形格式（PNG）图像 新型的WebP图像格式 3、图像元素 无障碍访问和图像 图像超链接 4、HTML5视觉元素 HTML5 Figure元素 HTML5 Figcaption元素 HTML5 Meter元素 HTML5 Progress元素 5、背景图像 background-image属性 同时配置背景色和背景图 浏览器显示背景图 background-repeat属性 background-position属性 background-attachment属性 6、更多有关图像的知识 图像映射 映射元素 区域元素 配置收藏图标 7、图片使用原则 图像使用指导原则 图片重用 权衡图片大小和质量 考虑图片的下载时间 使用合适的分辨率 指定维度 注意亮度与对比度 8、CSS3视觉效果 CSS3 background-clip属性 CSS3 background-origin属性 CSS3中对多张背景图像的处理 CSS3圆角效果 CSS3 box-shadow属性 CSS3的opacity属性 1、配置线条与边框

vue项目打包后css背景图路径不对的问题

由 烈酒焚心 提交于 2019-12-16 04:46:03
问题描述： 自己在自学vue做项目的过程中，遇到一个有关背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图： 当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。如下两张图对比 图一：使用npm run dev命令访问 图二：使用npm run build命令打包之后，访问dist目录下的文件，出现的问题，背景图片路径变成了http://127.0.0.1:9000/static/css/static/img/login-bg.0271ef1.jpeg，而实际在dist目录下，图片路径是这样的，如下图 解决办法： 解决办法为：只需要在build/utils.js文件中添加如下一行代码即可。 publicPath:'../../' 添加位置为如下图： 然后重新执行 npm run build 命令，即可成功显示图片 来源： CSDN 作者： LaoYe - IT 链接： https://blog.csdn.net/Rao_Limon/article/details/103518000

CSS入门（背景各种属性的详解、垂直居中和过渡效果的详解、渐变效果的简单讲解）

由 橙三吉。 提交于 2019-12-11 23:11:02
一、各种背景属性 1.background-image 属性为元素设置背景图像。 元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。 默认地，背景图像位于元素的左上角，并在水平和垂直方向上重复。 提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，页面也可获得良好的视觉效果。 属性值: url('URL') 　　指向图像的路径。 none 　　　　 默认值。不显示背景图像。 inherit 　　　 规定应该从父元素继承 background-image 属性的设置。 2.background-size 属性规定背景图像的尺寸。 语法: background-size: length|percentage|cover|contain; 属性值： length　　　　设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 percentage 　 以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为 "auto"。 cover 　　　 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。 contain 　　 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 3

Html CSS学习（六）background-position背景图像的定位

由 北慕城南 提交于 2019-12-10 21:09:44
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> Html CSS学习（六）background-position背景图像的定位 在网页中，会有很多的背景图像与一些小的图标等内容，在初学的时候，为了达到页面的效果，都是将原图切割成很多个独立的文件，这样，将会有几十个图像文件，在网页加载的时候，会与服务器进行几十次的交互，极其浪费资源，影响网页打开的速度，因些，实际的做法通常是将这些图像放在一个文件中，利用定位技术进行定位实现。在对背景处理时，主要用到了background-position这个属性。 一、背景的相关属性 background-image:背景图像 none：无背景图。 <url>：使用绝对或相对地址指定背景图像。 <linear-gradient>：使用线性渐变创建背景图像。（CSS3） <radial-gradient>：使用径向(放射性)渐变创建背景图像。（CSS3） <repeating-linear-gradient>：使用重复的线性渐变创建背景图像。（CSS3） <repeating-radial-gradient>：使用重复的径向(放射性)渐变创建背景图像。（CSS3） background-color:设置背景颜色 background-repeat:设置背景图像如何铺排填充 background-attachment
订阅 背景图