基于html,css背景平面图片暗格的应用

刚学css做的一个页面还望大家多多指导

代码如下

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>body {/* background-image: url(shrio/725341110883827.jpg);background-repeat: no-repeat;background-position: center top; */background: floralwhite url(shrio/725341110883827.jpg) no-repeat fixed center top;color: hsl(0, 73%, 55%);font-size: 20px;background-position: center 20px;}</style>
</head><body><p> 赵客缦胡缨,吴钩霜雪明。</p><p>银鞍照白马,飒沓如流星。 </p><p>十步杀一人,千里不留行。</p><p>事了拂衣去,深藏身与名。</p><p> 闲过信陵饮,脱剑膝前横。</p><p>将炙啖朱亥,持觞劝侯嬴。 </p><p> 三杯吐然诺,五岳倒为轻。</p><p>眼花耳热后,意气紫霓生。 </p><p>救赵挥金锤,邯郸先震惊。</p><p>千秋二壮士,烜赫大梁城。 </p><p>纵死侠骨香,不惭世上英。</p><p>谁能书阁下,白首太玄经。</p></body></html>

图片

加一行代码成为阴影

 background: rgba(0, 0, 0, 0.8);

图片如下

基于html,css背景平面图片暗格的应用相关推荐

  1. html 图片的过渡效果,详解CSS背景渐变图片transtion过渡效果技巧

    一.background-image不支持CSS3 transition background-image 不支持CSS3 transition ,而CSS3 gradient渐变作为背景图片存在的时 ...

  2. html背景图片横屏,CSS背景颜色 背景图片 居中 重复 固定样式background经验篇

    我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...

  3. css中背景颜色用哪个,CSS 背景颜色

    颜色背景 CSS中背景颜色由background-color决定,这里的背景颜色会渲染padding和content,不会渲染border和margin部分. 在css3中可以通过background ...

  4. html css 背景图片

    html css 背景图片 文章目录 html css 背景图片 视频 代码 视频 https://www.bilibili.com/video/BV1MJ411M7qi?from=search&am ...

  5. 利用wget 抓取 网站网页 包括css背景图片

    利用wget 抓取 网站网页 包括css背景图片 wget是一款非常优秀的http/ftp下载工具,它功能强大,而且几乎所有的unix系统上都有.不过用它来dump比较现代的网站会有一个问题:不支持c ...

  6. CSS固定背景的图片

    CSS固定背景的图片 对于一些背景图片,当浏览器出现滚动条时,通常不希望图片随着文字的移动而移动,而是固定在某一位置. CSS通过background-attachment的值为fixed来实现. & ...

  7. css背景图片、圆角、盒子阴影、浮动

    一.css背景图片 1.概述 背景是css中一个重要的的部分,也是需要知道的css的基础知识之一.这里主要介绍有关背景图片的5种常见属性,分别是: (1). background-color: rgb ...

  8. css背景图片添加url_CSS背景图片–如何向您的Div添加图片URL

    css背景图片添加url Say you want to put an image or two on a webpage. One way is to use the background-imag ...

  9. [转]解决IE下CSS背景图片闪烁的Bug

    [转]解决IE下CSS背景图片闪烁的Bug <P>        很多时候我们要给一些按钮或是img设置背景,而为了达到数据与表现样式分离的效果,通常背景样式都是在CSS里设定的,但是这个 ...

  10. css 背景图片的虚化

    css 背景图片的虚化 背景虚化时出现页面内容也被虚化的情况,使用伪类::before body .bg {position: relative;width: 100%;height: 100%;ov ...

最新文章

  1. unity3d 切换网络_Unity3d新网络请求方式UnityWebRequest详解
  2. PC机I/O端口分配列表
  3. 关于容器迁移、运维、查错与监控,你想知道的都在这里了
  4. POJ 2084 Catalan数+高精度
  5. linux的mysql本地yum安装_Linux下MySQL5.7.18 yum方式从卸载到安装过程图解
  6. OpenJudge计算概论-找出第k大的数
  7. Hibernate写hql语句与不写hql语句的区别?
  8. css3-自定义字体
  9. Chelly的串串专题
  10. 汉诺塔C语言递归实现详解
  11. 非常有价值的JAVA开源项目
  12. centos7安装tomcat7
  13. 渗透攻击阶段 PTES
  14. 如何将mac里的照片拷到硬盘
  15. Linux XFS文件系统修复
  16. 服务器许可证书,lic-auth: 基于Spring的项目中使用 `TrueLicense `生成和验证`License证书`(服务器许可)的示例代码...
  17. android 高德拖拽地图定位,拖拽选址-拖拽选址-示例中心-JS API UI 组件示例 | 高德地图API...
  18. node.js邮箱验证码
  19. Android小Demo——绘制小机器人
  20. 希捷 sshd 微型计算机,希捷1TB SSHD拆解/核心技术分析_硬盘_内存硬盘-中关村在线...

热门文章

  1. 用户登录系统和object类
  2. Nik Collection 6.2全新版Nik降噪锐化调色PS/LR插件
  3. C#开发WPF/Silverlight动画及游戏系列教程(Game Tutorial):(二十一)主位式地图移动模式...
  4. 《面试编程题真题合集(二)——招商银行2019校园招聘真题题解》
  5. HTML期末大作业~我的家乡(洛阳城)旅游网页设计作业成品(HTML+CSS+JavaScript)
  6. GitHub推出Scientist,帮助开发者重构关键路径代码
  7. 70 | Python 网络爬虫案例 —— 爬取电影数据
  8. 新时代下员工与公司的关系之我见
  9. Java框架--Mybatis学习笔记(2)--CRUD
  10. 代码本色 结合牛顿力学