zoukankan      html  css  js  c++  java
  • background-image 和 img

    一:解决div里面的img图像宽度不变,高度不变!   超出div部分设置隐藏!

         图片:1920x526 

         div容器: 1423x526   

     1. background-image:样式实现

         img: 标签或者html组建实现

     2.一般来说,如果是装饰性的图片就使用background-img,如果和文体内容很相关就使用img

     3.加载过程:如果你用引入了一个很大的图片,那么在这个图片下载完成之前,img后的内容都不会显示。而如果用css来引入同样的图片,网页结构和内容加载完成之       后,才开始加载背景图片,不会影响你浏览网页内容。 

     4.谨记:background图片的显示:div容器必须设置高度哦!

    二:background-image属性补漏

        1.background-image:不同的背景图像和图像用逗号隔开,所有的图片中显示在最顶端的为第一张。

        2.background-Origin: 定义背景图像的位置区域。

        3.background-clip:背景图裁剪方式。  

        4.background-size:length|percentage|cover|contain;      可以设置负值的哦!   试试不就知道了!

        问题:

      a:背景图超出容器,那么只会显示图片的左上部分哦!   默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。

          b:  设置背景图:容器必须设置高度哦! 

      c: background-size:100% 完全填充满父元素哦!    background-size:cover也是哦! 

                background-size:contain ?   这显示? 

        

     三:再次完善哦!

      1.background-color: rgba(4,4,4,0.7);    设定背景色的透明度哦!  不会影响到容器里的文字哦! 

             红+绿+蓝+Alpha透明的颜色    我们以后要实现半透明效果(无论是背景,边框,文字颜色等都可以用半透明实现了)

        http://www.zhangxinxu.com/wordpress/2010/05/rgba%e9%a2%9c%e8%89%b2%e4%b8%8e%e5%85%bc%e5%ae%b9%e6%80%a7%    e7%9a%84%e5%8d%8a%e9%80%8f%e6%98%8e%e8%83%8c%e6%99%af%e8%89%b2/

     

         2.background-position:设置背景图像的起始位置。    (解决背景图大于容器)

            background-size: length|percentage|cover|contain;

            背景图无法撑开容器哦!   所以超出部分会被overflow:hidden!    

            background-position就是就是为了当图片大于容器的时候,显示图片的指定部分哦!

     四:引申(你的突破点哦)

     问题1:  当图片的大小超出容器的大小时候,用img标签合适吗?     为了实现图片的缩放,还是用background好点吧!  

     问题2:  img做响应式好还是background-image做响应式好呢?     

     问题3:  css中图片何时会撑破div容器呢?          img会撑破容器的哦(当img的大小大于容器的大小)

     理解4:  为什么美工要把图片做的非常的大呢?  因为是为了在高分屏上获得更好的展示。  在普通屏上图片设置为溢出隐藏(如果图片不关心显示部分); 但如果关心,则可以利用

                 响应式实现哦 !   实现图片的缩放!  哦哦,理解美工的专业性! 

  • 相关阅读:
    Linked List Cycle leetcode java (链表检测环)
    Remove Duplicates from Sorted List II leetcode java
    Remove Duplicates from Sorted List leetcode java
    Merge Two Sorted Lists leetcode java
    Swap Nodes in Pairs leetcode java
    Median of Two Sorted Array leetcode java
    阿里云最便宜的四种域名注册
    nohup和&后台运行,进程查看及终止
    ipv6转ipv4 NAT64与DNS64基本原理概述
    ros使用pppoe拨号获取ipv6,并且下发IPV6的dns到客户机win7
  • 原文地址:https://www.cnblogs.com/njqa/p/6096838.html
Copyright © 2011-2022 走看看