background-attachment蒙板

 




INDEX.HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Tutorial</title>    
    <link rel="stylesheet" href="styles.css">

   
</head>
<body >
    <div class="banner">
        <h1>hello world</h1>
    </div>
    <div class="header">
        <h1>hello people</h1>
    </div>
</body>
</html>
CSS:
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
div {
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 60px;
    color: orange;
}
.banner {
    background: url(./detox.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.header {
    background: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)),
    url('./detox.jpg')center/cover no-repeat fixed;
   
}

CSS linear gradient generator:
https://www.colorzilla.com/gradient-editor/
background: linear-gradient(to bottom, #b4e391 0%,#61c419 50%,#b4e391 100%)

评论

发表评论

此博客中的热门博文

通过Graphql成功地查询Contentful，以便在我的gatsby项目中访问和显示图像

  使用 gatsby-image （v2） import * as React from "react" import { graphql } from "gatsby" import Img from "gatsby-image" function MainApp( {data} ){ return( <h1> {data.allContentfulHeroImage.edges.map(({ node },index) => <Img fluid={node.heroImage.fluid} alt = {``} key = {``} />)} </h1> ) } export default MainApp; export const query = graphql` query MyQuery { allContentfulHeroImage {  edges { node { heroImage { fluid (maxWidth:2000){ ...GatsbyContentfulFluid } } } } } }` 使用 gatsby-plugin-image （v3） import * as React from "react" import { graphql } from "gatsby" import { GatsbyImage } from "gatsby-plugin-image" function MainApp( {data} ) {   return (     <>         {data.allContentfulHeroImage.edges.map(({ node }, index) => <GatsbyImage image={node.heroImage.gatsbyImageData} alt={``} key={``} />)}     </>   ) } export defau...
阅读全文

Oracle忘了保存,Oracle Cloud甲骨文云服务器忘记SSH秘钥或未设置Public key的解决办法...

图片
  很多人创建实例对设置秘钥可能存在一些问题，导致后面服务器连接不上，下面是修改重置已创建服务器但是ssh登录不上的解决办法。 前期准备 1、 秘钥 对 这里以 Xshell 为例，菜单栏->工具->新建秘钥向导，下一步下一步生成公钥和私钥，可以将它们全部导出成文件。 2、创建一台新的实例，东京韩国现在应该没有资源了，可以创建一个收费的实例 如图示所示的实例配置就是收费，不带mirco后缀 3、Xshell使用上面的私钥opc用户登录已经创建的这台服务器，sudo -i可以切换root用户，供后面使用 重置登录不上服务器秘钥 1、停止之前登录不上的终免服务器，Tips：注意是停止服务器，不是终止！！！待会还需要启动 2、分离这台服务器的引导卷，停止服务器后，可以在下面分离引导卷，稍后会将这台服务器挂载到上面我们已经创建的收费服务器进行秘钥修改。 3、切换至收费服务器的细节页面，将已经分离的引导卷重新附加到收费服务器 4、点击附加后的选项查看iSCSI命令 5、切换到Xshell收费服务器控制台，依次执行上图中红框命令，执行： fdisk -l /dev/sdb 如果查看到磁盘信息，应该就已经附加成功。 6、挂载、执行如下命令 sudo mount -o nouuid /dev/sdb3 /mnt 如果此步报错，执行： sudo mount /dev/sdb3 /mnt 7、如果到了这一步，即将就ok了，修改 公钥 ，继续执行 sudo vi /mnt/home/opc/. ssh /authorized_keys 键盘按两次d可以删除已有秘钥，按i键进入编辑，将上面准备的公钥文件内容，记住是公钥，全部粘贴到里面，注意空格和换行，按ESC->按住shift+两次z键，保存退出 8、解除挂载，执行命令 sudo umount /mnt 9、执行下图红框中命令，分离引导卷 10、网页操作界面分离 11、重新将这个卷挂载到终免服务器上，然后启动服务器，这样就可以使用刚刚上面生成的私钥登录这台服务器了，至此ssh秘钥修改完毕 如果细节上有什么问题可以在下面留言。 参考oracle官方文档：https://blogs.oracle.com/cloud-infrastructure/recovering-opc-user-ssh-key-on-oracl...
阅读全文

Nginx【Docker系列】一个反向代理神器——Nginx Proxy Manager

 nginx 安装docker 安装Docker、Docker-compose 更新、安装必备软件 apt-get update && apt-get install -y wget vim 安装docker：非大陆Docker安装 wget -qO- get.docker.com | bash 查看Docker版本 docker -v 开机自动启动 systemctl enable docker 卸载Docker sudo apt-get purge docker-ce docker-ce-cli containerd.io sudo rm -rf /var/lib/docker sudo rm -rf /var/lib/containerd 非大陆Docker-compose安装 sudo curl -L "https://github.com/docker/compose/releases/download/1.29.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose sudo chmod +x /usr/local/bin/docker-compose docker-compose --version 强烈建议大家专门给Docker的数据、配置文件新建一个文件夹 mkdir -p data/docker_data ---------- docker 安装 nginx mkdir /root/data/docker_data/NPM nano docker-compose.yml 配置代码 version: "3" services: app: image: 'jc21/nginx-proxy-manager:latest' restart: unless-stopped ports: # These ports are in format <host-port>:<container-port> - '80:80' # Public HTTP Port - '443:44...
阅读全文