从零开始学习JavaWeb（CSS背景图片固定+获取网页图片）

前言：如果这篇文章对你有帮助，点个赞或留个评论都是对我莫大的支持。

在分享如何给图片增加属性之前我先分享下如何获取我们喜欢的某个网页的图片。
以Oracle为例，我想要他的背景图，可以先打开chrome游览器，在该页面按F12，进入管理者模式

这里的disable cache说明下，一般游览器会在用户第一次访问某个网站时保存该网站的css样式，这样就不用每次都从服务器去找，这样加载速度更快，但有时候服务器更新了样式但客户端还保留着之前的，就可能不会加载，所以勾选之后，游览器会重新向服务器请求css文件，免得出现你明明改了文件却发现没效果这种情况。

回到刚刚的问题，在新窗口打开后图片后就可以直接把图片拖动到我们的桌面了，就很NICE,再顺便提一下，这F12厉害得很，有时候也可以用来分析图片加载失败的原因等等

在使用css样式之前，我们先连接到 *.css文件，使用的方式有两种一种是@import，另一种是link。举个栗子说下区别，import有时候会导致你的游戏界面都加载好了，却看不见英雄，就心情很烦，link就不会。

<head>     <!-- 放在你的头里面 -->
<link rel="stylesheet" href="这里是路径" type="text/css" />
</head>

在css文件里，先加上 @charset “UTF-8”; 表示用utf-8编码，这个很重要，有时候如果因为一些原因导致用utf-8解析css，你却没有声明你的文件是怎么编码的，可能就加载不出来，听不懂没关系，先加上。

@charset "UTF-8";
/*****css这样注释内容，样式的格式就是下面这样****/
html{background:url();/*这里的路径就是你的图片路径了，注意（不加双引号）*/background-repeat:no-repeat;/*背景不重复*/background-attachment:fixed;/*背景不滚动*/background-size:cover;/*结合上一句背景始终固定，且覆盖整个游览器*/
}

刷新页面可以看到图片覆盖了整个屏幕，而且不会重复，修改游览器大小也只会裁剪部分，按住ctrl+滚轮图片也不会缩小

比如缩小50%，图片不会变

从零开始学习JavaWeb（CSS背景图片固定+获取网页图片）相关推荐

零基础学习CSS---05.CSS背景属性详解
CSS属性一.背景属性 1.background-color(背景颜色):red: 2.background-image(背景图片):background-image:url(图片地址); 3.ba ...
我的学习笔记——CSS背景渐变(Gradients)详解
我的学习笔记--CSS背景渐变(Gradients)详解一.线性渐变(Linear Gradients) 1.语法 background-image: linear-gradient(directi ...
amazeui学习笔记--css（HTML元素4）--图片image
amazeui学习笔记--css(HTML元素4)--图片image 一.总结 1.响应式图片:随着页面宽度而变化 .am-img-responsive class. <img src=&quo ...
Python 爬虫之爬虫的一些基本知识和基本操作（爬取视频、图片、获取网页源码等）整理
Python 爬虫之爬虫的一些基本知识和基本操作(爬取视频.图片.获取网页源码等)整理目录
html css背景图片精灵技术,HTML入门学习笔记--CSS背景和精灵图(5)
33-背景色彩 1.如何设置标签的背景色彩? 在CSS中有1个background-color:属性, 就是专门用来设置标签的背景色彩的取值: 具体单词 rgb rgba 106进制快捷键: bc ...
CSS学习笔记 | CSS背景
CSS背景本文内容: CSS背景:1. 背景颜色2. 背景图片3. 背景平铺4. 背景图片位置5. 背景图片固定(背景附着)6. 背景复合写法7. 背景色半透明8. 背景总结通过CSS背景属性,可 ...
修改placeholder文字文字换行省略号背景图固定鼠标经过图片闪光效果
1.input框里面的placeholder文字字体大小修改 input {background-color:transparent;font-size: (13 / @baseSize);paddi ...
python获取网页图片_Python获取网页上图片下载地址的方法
本文实例讲述了Python获取网页上图片下载地址的方法.分享给大家供大家参考.具体如下: 这里获取网页上图片的下载地址是正在写的数据采集中的一段,代码如下: #!/user/bin/python3 i ...
python获取网页图片_python抓取网页中的图片示例
python抓取网页中的图片示例代码如下: #coding:utf8 import re import urllib def getHTML(url): page = urllib.urlopen( ...

从零开始学习JavaWeb（CSS背景图片固定+获取网页图片）

从零开始学习JavaWeb（CSS背景图片固定+获取网页图片）相关推荐

最新文章

热门文章