-
2022-04-13 15:49:13
背景图片相关
1) 设置背景图片
background-image : url("路径")
设置背景图片,指定图片路径,如果路径中出现了中文或空格,需要加引号
2) 设置背景图片的重复方式
默认背景图片从元素的左上角显示,如果图片尺寸与元素尺寸不匹配时,会出现以下情况:
1 如果元素尺寸大于图片尺寸,会自动平铺,直到铺满整个元素
2 如果元素尺寸小于图片尺寸,图片默认从元素左上角开始显示,超出部分不可见
background-repeat:repeat/repeat-x/repeat-y/no-repeat
取值:
- repeat:默认值,沿水平和垂直方向重复平铺
- repeat-x:沿x轴重复平铺
- repeat-y:沿y轴重复平铺
- no-repeat:不重复平铺
3) 设置背景图片的显示位置
默认显示在元素左上角
background-position:x y;
取值方式:
1. 像素值:设置背景图片的在元素坐标系中的起点坐标
2. 方位值:
- 水平:left/center/right
- 垂直:top/center/bottom
- 注: 如果只设置某一个方向的方位值,另外一个方向默认位center
4) 设置背景图片的尺寸
background-size: width height;
取值方式:
1. 像素值
- 500px 500px; 同时指定宽高
- 500px; 指定宽度,高度自适应
2. 百分比
百分比参照元素的尺寸进行计算
- 50% 50%; 根据元素宽高,分别计算图片的宽高
- 50%;根据元素宽度计算图片宽高,图片高度等比例缩放
背景属性简写
background: color url("") repeat postion;
注意:
- 如果需要同时设置以上属性,遵照相应顺序书写
- background-size 单独设置
文本属性
1.字体相关
1) 设置字体大小:
font-size:20px;
2) 设置字体粗细程度
font-weight: normal;
取值:
- normal(默认值)等价于400
- bold (加粗) 等于700
3) 设置斜体
font-style: italic;
4) 设置字体名称
font-family: Arial, "黑体";
取值:
- 可以指定多个字体名称作为备选字体,使用逗号隔开
- 如果字体名称位中文,或者名称中出现了空格,必须使用引号
5) 字体属性简写
font: style weight size family;
注意:
- 如果四个属性都必须设置,严格按照顺序书写
- size family 是必填项
2 文本样式
1) 文本颜色
color:red;
2) 文本装饰线
text-decoration: none;
取值:
- underline 下划线
- overline 上划线
- line-through 删除线
- none 取消装饰线
3) 文本内容的水平对齐方式
text-align: center;
取值:
- left(默认):左对齐
- center:居中对齐
- right :右对齐
line-height: 30px;
使用:
文本在当前行中永远居中,可以借助行高调整文本在元素中的垂直显示位置
- line-height=height:设置一行文本在元素中垂直居中
- line-height>height:文本下移显示
- line-height<height :文本靠上显示
特殊:line-height可以采用无单位的数值,代表当前字体大小的倍数,以此计算行高
更多相关内容 -
web-页面body添加背景图片
2019-01-26 14:22:50页面body添加背景图片 背景图片存在static文件夹中 1、设置setting.py文件夹。 STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ] 2、在html文件中,加载static文件夹,加入第...页面body添加背景图片
背景图片存在static文件夹中1、设置setting.py文件夹。
STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ]
2、在html文件中,加载static文件夹,加入第一行就好了。
{% load staticfiles %} <!DOCTYPE html> <html lang="zh-CN">
3、login.html文件:
<body style="background: #ffffff url({% static "images/aini.jpg" %});background-size:100% 150%;">
4、index.html文件
<body style="background: #ffffff url({% static "images/dao.jpg" %});background-size:100% 500%;">
我图片的地址是:工程根目录/static/images/aini.jpg
background-size后面的两个百分数就是 分别设置 背景图片的长宽,根据需求自己设定。
作者:xxx_gt
来源:CSDN
原文:https://blog.csdn.net/xxx_gt/article/details/79724344
版权声明:本文为博主原创文章,转载请附上博文链接! -
Dreamweaver网页中的文本怎么添加背景图片?
2020-09-24 18:42:27Dreamweaver网页中的文本怎么添加背景图片?Dreamweaver设计的文本网页太单调,想要给文本添加星空背景图片,该怎么添加呢?下面我们就来看看详细的教程,需要的朋友可以参考下 -
java web项目中如何插入背景图片
2021-03-04 07:35:25对于java可视化界面插入背景图片这个倒是轻而易举,只需要background-inage:url(图片路径就行),而对于与web项目中,我开始时也是采用这种方法,但是不尽然,代码如下:效果如下:图片就是不显示,后期我又加了,...对于java可视化界面插入背景图片这个倒是轻而易举,只需要background-inage:url(图片路径就行),而对于与web项目中,我开始时也是采用这种方法,但是不尽然,代码如下:
效果如下:
图片就是不显示,后期我又加了
,效果还是和上面一样,也是没有图片显示。后来我仔细想了想,是没有获取到图片真正的路径问题。我们需要获取/img/qx.jpg,
我们就需要在jsp页面中写Java代码,让Java来获取项目的根路径,通过绝对路径的方式引入这些图片文件。我们则需要在jsp文件的开头写入下面的代码。
String path = request.getContextPath();
String basePath=null;
basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
int port=request.getServerPort();
if(port==80){
basePath=request.getScheme()+"://"+request.getServerName()+path;
}else{
basePath=request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
}
request.setAttribute("basePath", basePath);
%>
这几段代码只是获取基本的路径,而request就是我们常说的JSP九大隐式对象之一,JSP就是Servlet,request.setAttribute("basePath", basePath) 表示将得到的basePath(项目根路径)存放到request作用域中,但是到这里我们还是不能把图片显示出来,我们需要在图片路径前面加入这行代码$。如下:
看,图片就显示出来了:
好了,这次就分享到这里了,这里只是一个简单的图片插入问题,若有什么不对的地方,还望指教。
-
js实现按钮加背景图片常用方法
2020-12-11 09:44:20本文实例讲述了js实现按钮加背景图片常用方法。分享给大家供大家参考。具体实现方法如下: 方法一: 代码如下:<input type=”submit” onMouseOver=”style=background:url(‘imgs/jb51.gif’)”/> 方法二:... -
web前端背景的设置
2017-11-08 15:34:35web前端的背景设置,以及动态图的添加和代码的实现过程 -
在Eclipse中 Web项目 插入背景图片
2020-06-30 08:51:23标题在Eclipse中 Web项目 插入背景图片 将存放图片的文件夹放在WebContend文件夹内: 在jsp中用CSS时:展开全文 -
图片作为背景并且是链接的写法(背景图片加链接)
2020-12-13 23:53:32图片作为背景,并且是链接的写法。例如网站的logo图片。例如:土豆的logo图片 土豆网 a {display: block;width: 170px;height: 42px;text-indent: -9999px;background: url(/skin/__g/img/ui/nav/v2_v6.png) 0 0 no-... -
css代码添加背景图片常用代码
2014-07-25 11:10:34css代码添加背景图片常用代码 -
Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写
2022-04-27 17:33:24Web前端,CSS中关于背景颜色、背景图片、背景平铺、背景位置、背景相关属性连写 -
java web 插入图片 / 背景
2020-11-19 18:02:59CSS设置 背景填充 自适应全屏 例: Insert title here Hello 若只是普通的插入图片: /image/cat1.jpg> 图片也可滚动 /image/cat1.jpg> 例一个动态壁纸 Starfield Welcome -
js把图片的背景变透明
2019-01-16 11:15:25在web开发中,经常在网页上添加图片,如果图片的背景与网页的背景不同,会非常难看。如果图片的背景是透明的,那么无论网页的背景是什么,图片的背景是看不到的,图片完全与网页容为一体。 用到的知识有:html5、... -
CSS3给图片添加旋转背景特效
2018-10-08 09:24:25CSS3给图片添加旋转背景特效 || 鼠标悬停旋转背景特效 -
web背景图片_有关选择完美背景图像的Web设计指南
2020-06-24 02:58:47长期以来,背景一直是设计良好的网站的关键要素。 现代设计趋势更加重视它们。 现在期望它们不仅可以框架内容,而且还可以为页面中的各个部分提供视觉分隔。... 考虑背景图片时,您应该问自己的第一个问... -
关于Java Web css文件背景图片路径问题
2020-09-01 16:36:16借鉴了这位博主实现了一个好看的登录界面,但是遇到了图片不显示的问题 ...depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogComm -
web前端学习(二)——HTML里的网页的背景、图片
2021-12-07 17:31:13一、背景颜色 ...二、背景图片 background:设置背景图片 网页背景图片的使用:background=“ ” 三、图片 这里的图片是指在网页上放置一个图片,而不是整个网页的背景图片,两者并不等同。 ... -
Web基础(从零开始)——CSS背景设置(颜色,图片,位置,背景图像固定)
2021-11-13 09:58:372.背景图片:(插入图片位置比较难调,一般使用背景图片)通过 background-image: url(图片地址); 设置背景图片,背景图片默认平铺。 设置背景平铺:background-repeat: repeat(平铺)|no-repeat(不平铺)|repeat... -
【Web前端】网页背景图设置技巧
2019-07-23 12:02:11问题一:如何设置背景图铺满整个屏幕 css代码: body { background-image: url("../img/bg.jpg"); background-position: center center; background-repeat: no-repeat; background-attachment: fixed; ... -
html怎么设置背景图片全屏平铺?_WEB前端开发
2021-06-12 02:15:47html怎么设置背景图片全屏平铺?1、新建一个html文档。2、设置一下HTML的框架,然后把图片设置在同一个文件夹里面。3、加入,这样可以有样式设置。4、因为背景设置在主体,所以还要定义为body{}。5... -
css如何设置背景图片?background属性添加背景图片
2020-05-18 22:19:20在前端开发过程中,为了页面的美观,往往都会给html页面添加背景图片。那么如何利用css设置html中用图片做背景?本章就给大家介绍css怎样设置背景图片。有一定的参考价值,有需要的朋友可以参考一下,希望对你有所... -
移动端也能兼容的web页面制作2:导航栏、背景图片设置
2022-03-18 10:38:55MDBootstrap 导航栏、背景图片设置 效果图 第一章:背景图片设置 ① 放置图片 ② 引入图片 ③ 图片蒙层 第二章:导航栏设置 ① 基础导航栏添加 ② 下拉菜单 ③ 菜单跳转 第三章:其它 ① 源代码 ② 高亮语法设置 -
Web——CSS页面背景
2020-10-15 16:40:00要求:设计如下网页分析: 1、背景颜色、背景图片插入(右上角); 2、插入无序列表列表图片; 3、插入3张图片 -
如何为一个div添加多个背景图片
2021-06-12 05:59:50为一个div添加多个背景图片的方法首先,我们新建一个HML页面,并准备好两张不同的背景图片。然后,我们在htl中随便新建一个块级元素,为他设置宽高,可以写点文字。浏览器中的效果是下图这样的。然后,我们开始为... -
java web中如何添加图片
2021-03-02 11:14:34java web中如何添加图片对于java可视化界面插入背景图片只需要background-image:url(图片路径)就行,而对于web项目中,并非如此效果如下:我们就需要在jsp页面中写Java代码,让Java来获取项目的根路径,通过绝对路径... -
如何给文字添加背景图?给文字填充图片背景色的操作方法
2021-06-13 04:09:12下了两天的雨,今天终于放晴了,而且还是阴天的天气,有微风,没有热辣的太阳,这让小编不禁感到了一股秋...或者是说给文字添加一个图片背景色?答案当然是可以的啦,小编已经把方法放在下边了哦,快来围观~首先需要... -
html设置表格背景图片.doc
2021-06-09 08:58:17html设置表格背景图片篇一:CSS样式表控制背景图片大小CSS样式表控制背景图片大小满意回答对于图片,首先我们先想到是背景图片。因为我们许许多的装饰都是用背景图片来实现的。既然这样,那么就从CSS控制背景图片讲... -
html – 在CSS背景图片中添加URL链接?
2021-06-12 12:10:00} 如何添加该CSS中的背景图片的链接? 完整的CSS可以找到here,使用的html是there. 301_11@ 尝试将锚定标签包裹在锚标签中并应用背景图像. ... -
css 如何在一个背景图片的中间添加文字呢?
2021-06-11 18:24:56摘要:下文讲述使用css代码在背景图片的中间添加文字的方法分享,如下所示;实现思路:1.定义一个div,并放入背景图片,设置其内部元素水平垂直居中2.定义一个子div,并放入文字信息通过以上两个步骤,即可实现背景... -
web中html+CSS修改背景图片的不透明度
2020-05-04 21:37:15在web的开发中,要增加一张背景图片,但是图片不透明度太高看着很不舒服,所以有必要降低图片不透明度。但是在body中增加一张背景图片后,不能直接的修改图片不透明度。用div包裹body内容修改的不透明度是整一个div... -
IDEA2019:在JSP中添加背景图片,解决JSP中背景图片不显示问题
2021-11-17 15:48:30IDEA2019:添加JSP背景图片 文章目录IDEA2019:添加JSP背景图片前言一、操作步骤总结 前言 想为JSP添加背景图,让JSP变得好看,但添加完后,图片在启动服务器后并不显示,该如何解决呢? 一、操作步骤 1.创建一个...