background-attachment background-position background-size ackground-repeat

/* background:url(`image.jpeg`)
background-repeat
background-size
background-position
background-attachment
shorthand syntax*/ 

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="big-img">
        <h1>I'M BIG IMAGE</h1>
    </div>
    <div class="small-img">
        <h1>I'M SMALL IMAGE</h1>
    </div>
    <div class="folder-img">
        <h1>I'M FOLDER IMAGE</h1>
    </div>
</body>
</html>

CSS:

/*
background:url(`image.jpeg`)
background-repeat
background-size
background-position
background-attachment
shorthand syntax
*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;

}
div{
    color: red;
    height: 400px;
    font-size: 60px;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.big-img {
    background:url('iceland.jpg');
    background-repeat: no-repeat;
    background-size:cover;
    background-position: center;
    background-attachment: fixed;
}
.small-img {
    border: 2px solid red;
    background: url('./detox.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
}
.folder-img {
    background: url('./detox.jpg');
}


评论

发表评论

此博客中的热门博文

又一款美国免费主机，无限流量动态X10hosting

图片
  X10hosting提供的免费套餐配置如下： 控制面板 空间 流量 顶级域名 SSL FTP 邮箱 数据库 文件数 Cpanel 512M 无限 支持 支持 支持 3个 2个 50000 X10hosting也有高级托管套餐和VPS，分别是$3.95和$8.95起，无其他限制，但是本文我使用的依旧是免费套餐，下面简单测试使用教程和用户体验。 X10的注册 1、在 https://x10hosting.com/#create ，我们选择免费计划，继续到下一个页面。 2、然后直接填写邮箱，点击继续！然后到邮箱收信，点激活链接继续下一步。 3、接下来我们要完成用户和团队的设置，例如填写 网站名称、住址等等，我注册时候没有截图，当然这并不困难。 X10的使用 1、完成注册后，我们登陆地址是  https://x10hosting.com/login-select ，我们刚刚注册的是x10hosting，点击最左边进入即可。 2、接下来我们输入邮箱和密码，点击登陆，到用户仪表盘。然后点击 Add New，添加一个服务，名字随便吧，就是给你的二级域名。 3、点击服务名称即可进入主机管理面板，这里的选项都比较常见，如：SSL、域名设置、php版本管理等等。 4、支持ftp上传文件，注意目录我们要选择：public_html； 5、另外就是X10支持自动安装程序，点击扩展——wordpress，来到softaculous，即可一键安装多达380种程序。哪怕是用它来学习或者选择适合自己的程序，也蛮不错的。 X10使用心得 1、X10的网站设计比较简单，支持中文，我觉得很容易理解； 2、给到的二级域名是*.x10.mx的，实在不适合建站使用，若是想做站点要弄个顶级域来；另外就是空间欧美用户访问比较快（ping在60ms以内）整个英文站也不错。 3、最大的优点是无限流量，妈妈再也不用担心超过限制网站无法访问了！ 综合评分 ⭐⭐⭐⭐⭐ 感觉不错，那就来注册吧~  https://x10hosting.com/#create 视频教程： 哔哩哔哩： https://www.bilibili.com/video/BV188411s7Hu/ YouTube： https://www.youtube.com/watch?v=mNqp-npuZ_A
阅读全文

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
阅读全文

这个网盘不限速，而且支持临时分享

图片
 来源：https://iweec.com/285.html 钛盘 TMP.link官网： https://app.tmp.link/ 这是一款不限速、无限空间、无需安装客户端、免费的在线临时文件分享网盘。 临时空间不限容量、不限数量单个文件最大50G，保存24小时，上传和下载均不限速。 注册用户免费5G空间，扩展的价格是256G 6元/月；1T的是18元/月；经过测试，居然可以跑满带宽。 所有上传下载都完全基于网页，无需安装客户端。 你可通过浏览器或 curl 命令行上传/下载文件；别人下载无需注册登录帐号、不限速、即用即走，非常方便! 别人打开你的钛盘文件共享链接后可以直接下载文件，无需注册登录账号，非常适合用于随手分享文件给好友、同事或者是陌生人。 在下载文件时，用户除了可以通过浏览器直接下载外，钛盘还非常贴心地提供了“复制下载链接到其他软件”来调用 IDM、迅雷等多线程下载工具进行加速，同时还提供了超方便的在服务器上或 Linux 系统进行下载的 curl 和 wget 命令代码，用于实例文件脚本的存储，方便之极！
阅读全文