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. EF Code First 无法加载指定的元数据资源

    是由属于一般出现这个错误是由于App.config里面配置错误,DB First 是不一样的. 配置文件不止一个地方··多查查其他项目有没有.

  2. Spring听课笔记(专题二下)

    第4章 Spring Bean基于注解的装配 4.1 Bean的定义及作用域的注解实现 1. Bean定义的注解 -- @Component是一个通用注解,可用于任何bean -- @Reposito ...

  3. Weblogic漏洞利用

    Weblogic漏洞 Weblogic任意文件上传(CVE-2018-2894) 受影响版本 weblogic 10.3.6.0.weblogic 12.1.3.0.weblogic 12.2.1.2 ...

  4. redis学习教程四《管理、备份、客户端连接》

    redis学习教程四<管理.备份.客户端连接>  一:Redis服务器命令 Redis服务器命令 下表列出了与Redis服务器相关的一些基本命令. 序号 命令 说明 1 BGREWRITE ...

  5. java 将内容写入文件 txt

    @Test //将内容写入文件 public void xieru() throws Exception{ FileWriter fileWriter=new FileWriter("d:\ ...

  6. 3.centos 7执行service iptables save报错问题

    1.报错 [root@localhost ~]# service iptables save The service command supports only basic LSB actions ( ...

  7. DolphinScheduler1.3.2源码分析(二)搭建源码环境以及启动项目

    前置依赖组件安装 找一台服务器,或者本地的虚拟机,然后在服务器上安装好jdk,zookeeper,mysql. 1.源码调试环境搭建 源码环境搭建可以参考DolphinScheduler官方网站的开发 ...

  8. Java排序算法(四)希尔排序2

    Java排序算法(四)希尔排序2 希尔排序移步法:分组+直接插入排序组合 一.测试类SortTest import java.util.Arrays; public class SortTest { ...

  9. sentinel流控规则校验之源码分析

    前言: 上节给大家把sentinel流控整个执行大致过了,但涉及到最核心的流控算法还没有讲,先提前说明一下 sentinel用的流控算法是令牌桶算法,参考了Guava的RateLimiter,有读过R ...

  10. Mybatis学习笔记1

    mybatis是一个orm持久化框架,mybatis专注于sql的操作从3.0开始名字改变了:ibatis-mybatis 对象关系映射(Object Relational Mapping) 一.My ...