饿了么webapp之header的背景
来源:互联网 发布:淘宝运营多少人 编辑:程序博客网 时间:2024/06/05 01:11
效果图:
就是把header的背景图实现以上效果,模糊效果,在遮盖罩下方,图片和商家头像图片一样。
我一开始的想法是直接给header设置背景图片,但是图片是商家头像,数据是通过后端获取的,那么css可以使用js的数据吗?网上查了一下,答案是可以的。
我们知道CSS里是可以控制某些HTML元素的属性的,譬如background-image等等,而在URL里添加Javascript:alert()等等类似的代码就可以用来执行代码。
我用的CSS代码如下:
<style type="text/css">body{height:200px;background:url(javascript:alert("test!"));}
将这段代码随意插入到任何页面中都会执行其中的JS代码.
显然这开启了针对很多对于CSS具备自由编辑功能的很多BSP(BLOG服务提供商)的攻击思路,而对CSS入手的攻击目前作防范的很少.
从另一角度来看,设计系统可以在JS设计时考虑利用CSS进行包含和引用.这是很好的一个从JS控制CSS到CSS控制JS的一个反作用.
而深发出一个看法,具体待验证:凡是可以放URL的地方,均可以试试放javascript,可能就能成功!
关键字:css调用javascript 代码 css调用js代码
CSS中expression使用简介
定义
IE5及其以后版本支持在CSS中使用expression,用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是元素固有的属性,也可以是自定义属性。就是说CSS属性后面可以是一段Javas cript表达式,CSS属性的值等于Javas cript表达式计算的结果。 在表达式中可以直接引用元素自身的属性和方法,也可以使用其他浏览器对象。这个表达式就好像是在这个元素的一个成员函数中一样。
给元素固有属性赋值
例如,你可以依照浏览器的大小来安置一个元素的位置。
#myDiv {position: absolute;width: 100px;height: 100px;left: expression(document.body.offsetWidth - 110 + "px");top: expression(document.body.offsetHeight - 110 + "px");background: red;}
给元素自定义属性赋值
例如,消除页面上的链接虚线框。 通常的做法是:
<a href="link1.htm" onfocus="this.blur()">link1</a><a href="link2.htm" onfocus="this.blur()">link2</a><a href="link3.htm" onfocus="this.blur()">link3</a>
粗看或许还体现不出采用expression的优势,但如果你的页面上有几十甚至上百个链接,这时的你难道还会机械式地Ctrl+C,Ctrl+V么,何况两者一比较,哪个产生的冗余代码更多呢?
采用expression的做法如下:
<style type="text/css">a {star : expression(onfocus=this.blur)}</style><a href="link1.htm">link1</a><a href="link2.htm">link2</a><a href="link3.htm">link3</a>
不是非常需要,一般不建议使用expression,因为expression对浏览器资源要求比较高。 能不用则不用,会导致性能问题。
还有就是在IE 和 firefox 下执行正常,但是在chrome 中可能会失常
如果我这里用javascript,好像不是很符合逻辑,如果用expression,可能获取到的seller.avatar不能被解析为一个url,而且性能低,所以,我还是使用教程的方法吧。
就是在header这个父元素里建立一个直接子元素background,然后通过绝对定位以及z-index:-1达到效果
<div class="background">
<img :src="seller.avatar" width="100%" height="100%">
</div> //父元素是header
.header
position:relative
overflow: hidden
color:#fff
background:rgba(7, 17, 27, 0.5)
.background
position: absolute
top: 0
left: 0
width:100%
height:100%
z-index:-1
filter:blur(10px)
filter是css3的新属性,定义了元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
具体用法:http://www.runoob.com/cssref/css3-pr-filter.html
- 饿了么webapp之header的背景
- 饿了么webapp之css footer的实现
- 饿了么webapp之1px边框
- 饿了么webapp之数据二级访问
- vue饿了么webapp之vue.set用法
- vue2.0仿饿了么webapp
- 饿了么webapp之块级盒子垂直相邻margin重叠
- vue饿了么webapp之router-view传值(深坑!!)
- vue饿了么学习-第十篇(header样式)
- Header背景处理方案
- IOS-UITableView手动添加时,Header Section的背景设置
- WebAPP开发之viewport的深入理解
- WebApp 和 NativeApp 的世纪之战
- 基于vue仿饿了么webapp部署到Coding上
- 慕课网实战项目《WebAPP书城整站开发》笔记六:字体面板中“背景”切换的交互开发
- toolkit:DatePicker header背景颜色
- <div>的背景被<body>的背景遮蔽了。。。。。
- WebApp之Meta标签
- HTML5--本地存储Web Storage
- localhost不能访问127.0.0.1可以访问的原因及解决方法
- 安卓Banner实现轮播图
- Word快捷键大全
- oracle之spfile与pfile
- 饿了么webapp之header的背景
- RTAI API-----Message handling functions
- 第七周项目3-负数把正数赶出队列
- 程序设计C 实验二 题目三 计算生日是星期几(0078)
- ios __block与__weak
- WPF Template模版之DataTemplate与ControlTemplate的关系
- 用户登录,记住密码
- 在centos7下安装docker
- 微信小程序开发开启https方法:【适用于腾讯云】