css & background-image & full page width & background-size

https://css-tricks.com/perfect-full-page-background-image/

https://stackoverflow.com/questions/12085881/css-100-width-and-background

background-size: cover;

html {
background: url("https://cdn.xgqfrms.xyz/logo/icon.png") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

background-size: 100%;

.divWithBgImage {
width: 100%;
height: 600px;
background-image: url("https://cdn.xgqfrms.xyz/logo/icon.png");
background-repeat: no-repeat;
background-size: 100%;
/* propotional resize */
}


https://cdn.xgqfrms.xyz/plugins/getfullyear.js



const copyRightYear = () => {
let copyYear = Symbol();
copyYear = new Date().getFullYear();
const spanYear = document.getElementById('spanYear');
spanYear.style.background="yellow";
spanYear.style.color="#000";
spanYear.innerHTML=`Copyright © ${copyYear} - 2050 xgqfrms`;
return spanYear;
}; window.onload = copyRightYear();

background & radius border

background color & view bug

https://codepen.io/xgqfrms/full/JQeqXQ


xgqfrms 2012-2020

www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!


css & background-image & full page width & background-size的更多相关文章

  1. css常用的简写技巧_css background简写、css border 简写、css font属性简写等

    css样式中有很多简写方式,比如:设置背景,字体,边框,盒子等.我们都可以把css代码合并为一行,这篇文章将总结有哪些属性支持css简写. 1.背景background属性 background-co ...

  2. (python走过的坑)OpenCV中错误opencv-3.3.1\modules\highgui\src\window.cpp:339: error: (-215) size.width>0 && size.height>0 in function cv::imshow

    第一次在python中使用OpenCV(cv2),运行时报错opencv-3.3.1\modules\highgui\src\window.cpp:339: error: (-215) size.wi ...

  3. error: (-215:Assertion failed) size.width>0 && size.height>0 in function 'cv::imshow'

    用Python打开图像始终提示错误 error: OpenCV(4.1.1) C:\projects\opencv-python\opencv\modules\highgui\src\window.c ...

  4. line 352 Error: Assertion failed (size.width>0 && size.height>0) in cv::imshow

    OpenCV 使用 createtrackerbar()报错问题 Error Error: Assertion failed (size.width>0 && size.heig ...

  5. css常用属性总结:背景background下篇

    前言:这段时间天天加班到10:30之后,简直是x了. 在上一篇文章中,分别解析了background各个属性的用法和注意细节.如果我们在项目上使用背景效果,如果使用下面的写法,你可能抓狂. body{ ...

  6. css常用属性总结:背景background上篇

    1.在前面一节中我们提到了color的使用,类似于前景色,我们同样可以为元素的背景声明颜色,可以使用background-color属性, 它接受任何有效的颜色值.先看看它的语法. backgroun ...

  7. FCC---Use the CSS Transform scale Property to Change the Size of an Element

    To change the scale of an element, CSS has the transform property, along with its scale() function. ...

  8. css中 Span 元素的 width 属性无效果原因及多种解决方案

    先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...

  9. css中span元素的width属性无效果原因及多种解决方案

    先运行下程序看下: <span style='width:300px;'>123</span> 输出:123 可以看到 span会自动根据包含的内容来变化宽度 这是因为:对于内 ...

随机推荐

  1. : cannot validate certificate for 127.0.0.1 because it doesn't contain any IP SANs

    : cannot validate certificate for 127.0.0.1 because it doesn't contain any IP SANs

  2. oracle创建表并加索引

    一个语句创建Oracle所有表的序列 -- 动态创建序列 2 declare 3 cursor c_job is 4 select TABLE_NAME from user_tables; 5 6 c ...

  3. http 和 https 有何区别?如何灵活使用?

    http是HTTP协议运行在TCP之上.所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份. https是HTTP运行在SSL/TLS之上,SSL/TLS运行在TCP之上.所有传输的内容都经 ...

  4. Webpack4.0各个击破(7)plugin篇

    目录 一. plugin概述 1.1 Plugin的作用 1.2 Compiler 1.3 Compilation 二. 如何写一个plugin 四. 实战 [参考] 一. plugin概述 1.1 ...

  5. java创建线程的多种方式

    java创建线程的四种方式 1.继承 Thread 类 通过继承 Thread 类,并重写它的 run 方法,我们就可以创建一个线程. 首先定义一个类来继承 Thread 类,重写 run 方法. 然 ...

  6. redis学习教程三《发送订阅、事务、连接》

    redis学习教程三<发送订阅.事务.连接>  一:发送订阅      Redis发布订阅(pub/sub)是一种消息通信模式:发送者(pub)发送消息,订阅者(sub)接收消息.Redi ...

  7. MVC框架,SpringMVC

    文章目录 使用Controller URL映射到方法 @RequestMapping URL路径匹配 HTTP method匹配 consumes和produces params和header匹配 方 ...

  8. 浅聊TCP的三次握手和四次挥手

    三次握手: 首先Client端发送连接请求报文,Server段接受连接后回复ACK报文,并为这次连接分配资源.Client端接收到ACK报文后也向Server段发生ACK报文,并分配资源,这样TCP连 ...

  9. (14)Linux绝对路径和相对路径

    Linux 系统中,文件是存放在目录中的,而目录又可以存放在其他的目录中,因此,用户(或程序)可以借助文件名和目录名,从文件树中的任何地方开始,搜寻并定位所需的目录或文件. 说明目录或文件名位置的方法 ...

  10. 封装打包Python脚本

    1.前言 封装打包Python的好处,节省了安装各种各样包依赖的问题,同时可以加强我们代码隐私的安全性,这里我的演示环境是Python3.6 ,CentOS7的系统,同时打包工具采用pyinstall ...