body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80'); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; -we...
background-image:linear-gradient(direction?, color-stop1, color-stop2, ...?); 栗子:background-image:linear-gradient(red ,blue) background-image:linear-gradient(90deg, red ,blue) background-image:linear-gradient(to right top ,red, blue); radial-gradient() 椭圆渐变 background-image: radial...
background-image: url("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80"); background-size: cover; background-repeat: no-repeat; } .night { background-image: url("https://images.unsplash.com/pho...
img 和 background-image 的使用选择 简单来说,img是内容部分的东西,background-image是修饰性的东西。 稍微加点文字就是 img 从页面元素来说,如果是页面中的图片是作为内容出现的,比如广告图片,比如产品图片,那么这个必然是用img了,因为这个是页面元素内容。页面元素内容最关键的一点就是,当页面没有样式的时候,还...
body { background-image: url('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80'); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover; -we...
ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80");background-size:cover;background-repeat:no-repeat;}.night{background-image:url("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w...
html, body{width:100%;height:100%;}body{background-image:linear-gradient(45deg,#7A88FF,#7AFFAF);} 浏览器会绘制一条经过元素中心点的假想线,指向45°刻度,因此,这个过渡从元素的左下角开始,到右上角结束。 这里推荐一个很好玩的网站: https://codepen.io/thebabydino/full/qgoBL ...
background-image:url(images/2.gif);将图像设置为背景。 background-repeat: no-repeat;设置背景图片是否重复及如何重复,默认平铺满。(重要) no-repeat不要平铺; repeat-x横向平铺; repeat-y纵向平铺。 background-position:center top;设置背景图片在当前容器中的位置。
简单来说，img是内容部分的东西，background-image是修饰性的东西。稍微加点文字就是img从页面元素来说，...
Background是一种 CSS 简写属性,一次性定义了所有的背景属性,包括 color, image, origin 还有 size, repeat 方式等等。 我们首先讲一下Background的日常语法: Background可以使用简写或者单独设置其中一项: 官方推荐顺序为:background: background-color,background-image,background-repeat,background-attachment,backgro...