当前位置: 首页 > news >正文

CSS背景属性

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS背景属性</title>
    <style>
        .c1{
            /* 设置背景颜色 */
            background-color: antiquewhite;
            /* 设置背景图片 */
            background-image: url(../悟空.jpg);
             /* 设置背景重复方式 */
             background-repeat: no-repeat;
             /* 设置图片位置 */
             background-position: 300px 100px;
            height: 500px;
            width: 500px;

            font-size: 40px;
            color: gold;
           
        }
         .c2{
            background: chartreuse url(../imags/1.png) no-repeat 300px;
        }
    </style>
</head>
<body>
    <div>
        <p class="c1">
            街角的咖啡店飘出阵阵香气,行人匆匆而过,偶尔有人驻足,点一杯热饮,享受片刻的宁静。生活有时就是这样,在忙碌中寻找一点小小的惬意。
        </p>
        <br>
        <p class="c2">老旧的唱片机缓缓转动,悠扬的音乐流淌出来</p>
    </div>
</body>
</html>

background - position讲解
 background-position: left ; ;如果只写一个值,另一个方向的值取 center

background-position: right

 background-position: 100px  500px ;

  background-position: 100px   ;

相关文章:

  • python——GUI图形用户界面编程
  • MySQL主从服务器配置教程
  • 【C++】模板初阶和STL简介
  • Linux提权之metasploit 提权(五)
  • 登录-07.JWT令牌-登录后下发令牌
  • 编程题-连接两字母单词得到的最长回文串(中等)
  • 从网络基础到安全防护:网安运维小白的入门学习路线
  • python-静态方法和类方法
  • 蓝桥杯训练题目(一)—— 难度:简单(除了最后一题哈)
  • 《Python实战进阶》专栏 No 4:高效、简洁、强大之使用 FastAPI 构建高性能异步API
  • 请简述一下Prefab(预制体)的本质是什么?
  • 大白话TypeScript第三章高级特性学习
  • 使用Socket编写超牛的http服务器和客户端(一)
  • L1-6 剪切粘贴(字符串增删查改)
  • INTJ人格的本质
  • 【JavaScript】《JavaScript高级程序设计 (第4版) 》笔记-Chapter21-错误处理与调试
  • Linux 命令大全完整版(12)
  • apply的用法
  • 自动驾驶中planning为什么要把横纵向分开优化?
  • AI知识架构之RAG
  • 海南高院通报去年知产领域司法保护状况:审结民事一审案件4847起
  • 巴基斯坦最近“比较烦”:遣返阿富汗人或致地区局势更加动荡
  • “网红”谭媛去世三年:未停更的账号和困境中的家庭
  • 潘功胜:央行将实施好适度宽松的货币政策,推动中国经济高质量发展
  • 银行板块整体走强,工行、农行、中行股价再创新高
  • 外交部回应菲律宾涉仁爱礁言论:菲方7轮运补均提前通报中方