频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
CSS背景图片和HTML中的img标签使用实例
2018-04-16 11:58:00      个评论    来源:Night_Emperor的博客  
收藏   我要投稿

背景图片:

该图片是218*170

\

css内容:

p{
	width: 100px;
	height: 100px;
	background: url(img/1.jpg);
	border: 2px solid red;
}

\

p{
	width: 500px;
	height: 500px;
	background: url(img/1.jpg);
	border: 2px solid red;
}

\

背景图片的默认格式:

当图片大于p时,图片部分填充;当图片小于p时,图片同时水平平铺和垂直平铺(背景图片的大小不发生改变)

可以通过background-size设置背景图片的大小

p{
	width: 300px;
	height: 300px;
	border: 2px solid red;
	background: url(img/1.jpg) no-repeat;
	background-size: 100%,100%;
}

\

background-size: contain 图片的宽和高都在p内部时,停止缩放。图片能完整显示

p{
	width: 100px;
	height: 100px;
	border: 2px solid red;
	background: url(img/1.jpg) no-repeat;
	background-size: contain;
}

\

background-size: cover图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;

p{
	width: 100px;
	height: 100px;
	border: 2px solid red;
	background: url(img/1.jpg) no-repeat;
	background-size: cover;
}

\

background-size:contain 和cover

相同点: 都是将图片以**相同宽高比**缩放以适应整个容器的宽高。

不同点:

1. 在no-repeat情况下,如果容器宽高比与图片宽高比不同,

cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被截掉;(图片不完整)

contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域;(图片是完整的)

2. 在repeat情况下:cover:与上述相同;contain:容器内至少有一张完整的图,容器留白区域则平铺背景图,铺不下的再裁掉。

background-position: center center;使背景图片居中显示

没有使用时:

p{
	width: 1000px;
	height: 410px;
	border: 2px solid red;
	background-image: url(img/2.jpg);
}

\

使用background-position: center center;时,背景图片居中显示

p{
	width: 1000px;
	height: 410px;
	border: 2px solid red;
	background-image: url(img/2.jpg);
	background-position: center center;
}

\

img标签中的图片

如果img设置了宽,图片的宽和高是等比缩放

img{
    	width: 640px;
    }

\

img{
    	width: 320px;
    }

\

两种结合的轮播效果

屏幕大于768px时,高度设置410px,高度不发生改变,宽度一直变化,且图片一直居中。

屏幕小于768时,p不设置宽度,并在p中添加img标签

@media (min-width: 768px) {
  #main_ad > .carousel-inner > .item {
    height: 410px;
  }
}

#main_ad > .carousel-inner > .item > img {
  width: 100%;
}

js文件

$(function() {  
  // 当文档加载完成才会执行  
  /** 
   * 根据屏幕宽度的变化决定轮播图片应该展示什么 
   * @return {[type]} [description] 
   */  
  function resize() {  
    // 获取屏幕宽度  
    var windowWidth = $(window).width();  
    // 判断屏幕属于大还是小  
    var isSmallScreen = windowWidth < 768;  
    // 根据大小为界面上的每一张轮播图设置背景  
    // $('#main_ad > .carousel-inner > .item') // 获取到的是一个DOM数组(多个元素)  
    $('#main_ad > .carousel-inner > .item').each(function(i, item) {  
      // 因为拿到是DOM对象 需要转换  
      var $item = $(item);  
      // var imgSrc = $item.data(isSmallScreen ? 'image-xs' : 'image-lg');  
      var imgSrc =  
        isSmallScreen ? $item.data('image-xs') : $item.data('image-lg');  
  
      // jQuery方式  
      // $element.data()  
      // 是一个函数 ,专门用于取元素上的自定义属性(data-abc)  
      // 函数的参数是我们要取得属性名称(abc)  
      //  
      // $element.attr('data-abc')  
      //  
      // JS中的写法  
      // element.dataset['abc']  
      //  
      // element.getAttribute('data-abc')  
      // element.setAttribute('data-abc','')  
  
      // 设置背景图片  
      $item.css('backgroundImage', 'url("' + imgSrc + '")');  
      //  
      // 因为我们需要小图时 尺寸等比例变化,所以小图时我们使用img方式  
      if (isSmallScreen) {  
        $item.html('<img src="' + imgSrc + '" alt="" />');  
      } else {  
        $item.empty();  
      }  
    });  
  }  
  // $(window).on('resize', resize);  
  // // 让window对象立即触发一下resize  
  // $(window).trigger('resize');  
  
  
  $(window).on('resize', resize).trigger('resize');  
});  
点击复制链接 与好友分享!回本站首页
上一篇:弹幕效果的实现(代码教程)
下一篇:web worker线程使用和介绍
相关文章
图文推荐
点击排行

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站