精华内容
下载资源
问答
  • 长期以来,背景一直是设计良好的网站的关键要素。 现代设计趋势更加重视它们。 现在期望它们不仅可以框架内容,而且还可以为页面中的各个部分提供视觉分隔。 在使用图片作为网站背景时,最好谨慎选择。 错误的选择...

    web背景图片

    长期以来,背景一直是设计良好的网站的关键要素。 现代设计趋势更加重视它们。 现在期望它们不仅可以框架内容,还可以为页面中的各个部分提供视觉分隔。

    在使用图片作为网站背景时,最好谨慎选择。 错误的选择实际上可能会打断您的信息。 更不用说对可访问性的潜在负面影响。

    考虑到这一点,让我们探讨一些选择和实现背景图像的最佳做法。

    1.无障碍至上

    在考虑背景图片时,您应该问自己的第一个问题是:它将对内容的可读性产生什么影响? 您将要确保文本可读,并且在与背景结合时设置了可接受的对比度。

    如果您不太确定上述可访问性问题,但是您确实喜欢某个特定图像,则可以采取一些措施使它起作用。 您可以使用照片编辑软件甚至CSS来更改不透明度和对比度之类的内容,或者添加图层蒙版以帮助使内容更具可读性。 为内容本身选择正确的字体和字体大小也很重要。

    最重要的是,您的背景永远不会干扰用户正确查看您的内容的能力。

    2.照片应相关且整洁

    照片背景已在网络上变得非常流行,并且是覆盖大面积区域的绝佳选择。 选择与您的网站相关的照片是个好主意。 这可能意味着您的地理位置,产品或服务的照片。 但是,您可能还会寻找一些您认为会有助于传达内容信息的东西。 背景图片应被视为您整体品牌策略的一部分。

    您还需要查找具有一些开放空间的照片(例如天际线或草地)。 即使不透明或颜色变化,杂乱的照片也可能会从您的内容中删除。 这并不意味着您不能使用动作镜头或其他引人入胜的图像。 更多的是避免图像太过压倒性。

    3.使用微妙和无缝的纹理

    纹理可以为您的网站的整体外观增添些许品味 。 无论是用于页面背景还是特定的内容区域,都需要寻找无缝的纹理,这意味着它们可以在屏幕上重复某种图案,使其看起来像一张大图像。 尽管有时您可以使用全尺寸的纹理图像,但是特别细腻的图像有时无法在多个屏幕尺寸上正常工作。 另外,文件大的图像可能会对页面加载时间产生负面影响。

    微妙也是纹理的理想品质(除非您要获得更野蛮的外观)。 再次,该想法是不要以粗体显示使用户不知所措。 寻找包含较柔和线条和色彩的图像,以使其与内容形成鲜明对比。

    4.考虑多个屏幕和设备

    背景的可见区域可以在各种屏幕尺寸之间发生巨大变化。 这尤其会对照片产生影响。 在宽屏显示器上看起来很漂亮的东西在手机上看起来也很恐怖。 图像的关键部分可能会被剪切掉,并导致失去上下文。

    这里的挑战是零件照片的选择和零件代码。 首先,寻找适合父容器所需长宽比( landscapePortraitsquare )的图像。 它们更有可能在较小的屏幕上很好地缩放。

    您还需要查看网站CSS如何处理不同屏幕的背景图像。 例如,使用background-size: cover; CSS属性可以确保完整图像可见。 只是知道它可能会使容器的尺寸变小。 最有可能的是,必须进行调整以使所有设备之间的所有像素看起来都完美无缺。

    5.从高分辨率图像开始,然后裁剪

    下载打算用作背景的图像时,请选择最高分辨率。 这将允许您进行任何必要的编辑,然后将图像裁剪为更合适的尺寸。 您需要确保将编辑后的版本另存为单独的文件。

    确定合适的大小将取决于您站点内容器的宽度。 尽管某些图像会很好地拉伸或重复(使用无缝纹理的一个优点),但其他图像可能会失真。 在这种情况下,将其裁剪为所需的最大宽度。 您甚至可以使用CSS Media Queries调用较小版本的图像来获取其他屏幕尺寸。

    将背景置于最前沿

    可以理解的是,由于有许多激动人心的技术影响着网页设计,因此我们往往不会过多地关注背景。 但是它们在讲故事和帮助我们创建令人愉悦的UI方面发挥着非常重要的作用。 全页背景有助于为网站设置基调,而板块背景为我们的内容提供了一定的喘息空间。

    当然,当我们选择能够满足我们需求的图像时,这一切效果最佳。 增强(但不干扰)用户消费内容能力的图像。 但是,我们还应该考虑细节,例如尺寸,长宽比和移动设备的适用性。 请记住,细节很重要,即使涉及后台使用的项目也是如此。

    有用的链接


    翻译自: https://webdesign.tutsplus.com/tutorials/a-web-designers-guide-to-selecting-the-perfect-background-image--cms-29814

    web背景图片

    展开全文
  • 作为刚刚学习java web的同学,有没有想过发给他或她一个网址,打开后就是一份惊喜,学会一个烂漫的程序员,这个一个表白的web程序,背景是由爱心和表白文字组成,然后是照片不同的旋转,首先是进入一个"小姐姐,可以...
  • java web 插入图片 / 背景

    千次阅读 2020-11-19 18:02:59
    CSS设置 背景填充 自适应全屏 例: Insert title here Hello 若只是普通的插入图片: /image/cat1.jpg> 图片也可滚动 /image/cat1.jpg> 例一个动态壁纸 Starfield Welcome

    CSS设置
    背景填充
    自适应全屏
    例:在这里插入图片描述

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    </head>
    
    <style type="text/css">		
     .p1{
    
                height:100%;
    
                width: 100%;
    
                position: fixed;
                
                background-position: center 0;
    
                background-image:url("image/cat1.jpg");
    
            }
    
    </style>
    
    <body>
     <p class="p1">Hello</p>
    </body>
    </html>
    

    在这里插入图片描述

    若只是普通的插入图片:
    <img id=“background” src=<%=request.getContextPath()%>/image/cat1.jpg>

    图片也可滚动

    <marquee behavior="scroll" direction="up" height="300" style="overflow:hidden;" scrollamount="5" width="300" onMouseOver="stop()" onMouseOut="start()">
    		
    	<img  src=<%=request.getContextPath()%>/image/cat1.jpg>
    	</marquee>
    

    例一个动态壁纸

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <!-- saved from url=(0037)http://html5wallpaper.com/wp-depo/15/ -->
    <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    	<title>Starfield</title>
    	
    	<meta http-equiv="content-language" content="en">
    	<meta name="description" content="javascript+canvas starfield">
    	<meta name="keywords" content="starfield, star,3d,effect,visual,javascript,canvas,dhtml,webdesign,google,chrome">
    	<meta name="author" content="REZ">
    	<meta name="generator" content="REZ">
    	<meta name="version" content="2.1">
    	<meta name="copyright" content="REZ 2007-2009">
    	<meta name="robots" content="all">
    	<meta name="viewport" content="width=device-width,user-scalable=0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
    	<style type="text/css">
    	body  {margin:0;padding:0;background-color:#000000;font-size:0;overflow:hidden}
    	div   {margin:0;padding:0;position:absolute;font-size:0;overflow:hidden}
    	canvas{background-color:#000000;overflow:hidden}
    	</style>
    <script type="text/javascript">
    google_ad_client='pub-5142607733332317';
    google_ad_slot='6304267293';
    google_ad_width=728;
    google_ad_height=15;
    </script><script type="text/javascript">
    function $i(id) { return document.getElementById(id); }
    function $r(parent,child) { (document.getElementById(parent)).removeChild(document.getElementById(child)); }
    function $t(name) { return document.getElementsByTagName(name); }
    function $c(code) { return String.fromCharCode(code); }
    function $h(value) { return ('0'+Math.max(0,Math.min(255,Math.round(value))).toString(16)).slice(-2); }
    function _i(id,value) { $t('div')[id].innerHTML+=value; }
    function _h(value) { return !hires?value:Math.round(value/2); }
    
    function get_screen_size()
    	{
    	var w=document.documentElement.clientWidth;
    	var h=document.documentElement.clientHeight;
    	return Array(w,h);
    	}
    
    var url=document.location.href;
    
    var flag=true;
    var test=true;
    var n=parseInt((url.indexOf('n=')!=-1)?url.substring(url.indexOf('n=')+2,((url.substring(url.indexOf('n=')+2,url.length)).indexOf('&')!=-1)?url.indexOf('n=')+2+(url.substring(url.indexOf('n=')+2,url.length)).indexOf('&'):url.length):512);
    var w=0;
    var h=0;
    var x=0;
    var y=0;
    var z=0;
    var star_color_ratio=0;
    var star_x_save,star_y_save;
    var star_ratio=256;
    var star_speed=4;
    var star_speed_save=0;
    var star=new Array(n);
    var color;
    var opacity=0.1;
    
    var cursor_x=0;
    var cursor_y=0;
    var mouse_x=0;
    var mouse_y=0;
    
    var canvas_x=0;
    var canvas_y=0;
    var canvas_w=0;
    var canvas_h=0;
    var context;
    
    var key;
    var ctrl;
    
    var timeout;
    var fps=0;
    
    function init()
    	{
    	var a=0;
    	for(var i=0;i<n;i++)
    		{
    		star[i]=new Array(5);
    		star[i][0]=Math.random()*w*2-x*2;
    		star[i][1]=Math.random()*h*2-y*2;
    		star[i][2]=Math.round(Math.random()*z);
    		star[i][3]=0;
    		star[i][4]=0;
    		}
    	var starfield=$i('starfield');
    	starfield.style.position='absolute';
    	starfield.width=w;
    	starfield.height=h;
    	context=starfield.getContext('2d');
    	//context.lineCap='round';
    	context.fillStyle='rgb(0,0,0)';
    	context.strokeStyle='rgb(255,255,255)';
    	var adsense=$i('adsense');
    	adsense.style.left=Math.round((w-728)/2)+'px';
    	adsense.style.top=(h-15)+'px';
    	adsense.style.width=728+'px';
    	adsense.style.height=15+'px';
    	adsense.style.display='block';
    	}
    
    function anim()
    	{
    	mouse_x=cursor_x-x;
    	mouse_y=cursor_y-y;
    	context.fillRect(0,0,w,h);
    	for(var i=0;i<n;i++)
    		{
    		test=true;
    		star_x_save=star[i][3];
    		star_y_save=star[i][4];
    		star[i][0]+=mouse_x>>4; if(star[i][0]>x<<1) { star[i][0]-=w<<1; test=false; } if(star[i][0]<-x<<1) { star[i][0]+=w<<1; test=false; }
    		star[i][1]+=mouse_y>>4; if(star[i][1]>y<<1) { star[i][1]-=h<<1; test=false; } if(star[i][1]<-y<<1) { star[i][1]+=h<<1; test=false; }
    		star[i][2]-=star_speed; if(star[i][2]>z) { star[i][2]-=z; test=false; } if(star[i][2]<0) { star[i][2]+=z; test=false; }
    		star[i][3]=x+(star[i][0]/star[i][2])*star_ratio;
    		star[i][4]=y+(star[i][1]/star[i][2])*star_ratio;
    		if(star_x_save>0&&star_x_save<w&&star_y_save>0&&star_y_save<h&&test)
    			{
    			context.lineWidth=(1-star_color_ratio*star[i][2])*2;
    			context.beginPath();
    			context.moveTo(star_x_save,star_y_save);
    			context.lineTo(star[i][3],star[i][4]);
    			context.stroke();
    			context.closePath();
    			}
    		}
    	timeout=setTimeout('anim()',fps);
    	}
    
    function move(evt)
    	{
    	evt=evt||event;
    	cursor_x=evt.pageX-canvas_x;
    	cursor_y=evt.pageY-canvas_y;
    	}
    
    function key_manager(evt)
    	{
    	evt=evt||event;
    	key=evt.which||evt.keyCode;
    	//ctrl=evt.ctrlKey;
    	switch(key)
    		{
    		case 27:
    			flag=flag?false:true;
    			if(flag)
    				{
    				timeout=setTimeout('anim()',fps);
    				}
    			else
    				{
    				clearTimeout(timeout);
    				}
    			break;
    		case 32:
    			star_speed_save=(star_speed!=0)?star_speed:star_speed_save;
    			star_speed=(star_speed!=0)?0:star_speed_save;
    			break;
    		case 13:
    			context.fillStyle='rgba(0,0,0,'+opacity+')';
    			break;
    		}
    	top.status='key='+((key<100)?'0':'')+((key<10)?'0':'')+key;
    	}
    
    function release()
    	{
    	switch(key)
    		{
    		case 13:
    			context.fillStyle='rgb(0,0,0)';
    			break;
    		}
    	}
    
    function mouse_wheel(evt)
    	{
    	evt=evt||event;
    	var delta=0;
    	if(evt.wheelDelta)
    		{
    		delta=evt.wheelDelta/120;
    		}
    	else if(evt.detail)
    		{
    		delta=-evt.detail/3;
    		}
    	star_speed+=(delta>=0)?-0.2:0.2;
    	if(evt.preventDefault) evt.preventDefault();
    	}
    
    function start()
    	{
    	resize();
    	anim();
    	}
    
    function resize()
    	{
    	w=parseInt((url.indexOf('w=')!=-1)?url.substring(url.indexOf('w=')+2,((url.substring(url.indexOf('w=')+2,url.length)).indexOf('&')!=-1)?url.indexOf('w=')+2+(url.substring(url.indexOf('w=')+2,url.length)).indexOf('&'):url.length):get_screen_size()[0]);
    	h=parseInt((url.indexOf('h=')!=-1)?url.substring(url.indexOf('h=')+2,((url.substring(url.indexOf('h=')+2,url.length)).indexOf('&')!=-1)?url.indexOf('h=')+2+(url.substring(url.indexOf('h=')+2,url.length)).indexOf('&'):url.length):get_screen_size()[1]);
    	x=Math.round(w/2);
    	y=Math.round(h/2);
    	z=(w+h)/2;
    	star_color_ratio=1/z;
    	cursor_x=x;
    	cursor_y=y;
    	init();
    	}
    
    document.onmousemove=move;
    document.onkeypress=key_manager;
    document.onkeyup=release;
    document.onmousewheel=mouse_wheel; if(window.addEventListener) window.addEventListener('DOMMouseScroll',mouse_wheel,false);
    
    </script><style type="text/css">
    :root #adsense
    { display: none !important; }
    :root *[quqqn1e][hidden] { display: none !important; }</style></head>
    
    
    
    
    <body onload="start()" onresize="resize()" onorientationchange="resize()" onmousedown="context.fillStyle=&#39;rgba(0,0,0,&#39;+opacity+&#39;)&#39;" onmouseup="context.fillStyle=&#39;rgb(0,0,0)&#39;">
    <canvas id="starfield" style="background-color: rgb(0, 0, 0); position: absolute;" width="1010" height="362"></canvas>
    <div id="adsense" style="position: absolute; background-color: transparent; left: 141px; top: 347px; width: 728px; height: 15px; display: block;" quqqn1e="" hidden="">
    	<script type="text/javascript" src="http://html5wallpaper.com/wp-depo/15/Starfield_files/show_ads.js"></script>
    </div>
    
    <h1 align="center" id="character1">Welcome</h1>
    
    <script type="text/javascript" src="http://html5wallpaper.com/wp-depo/15/Starfield_files/urchin.js"></script>
    <script type="text/javascript"> var _uacct='UA-241365-1'; urchinTracker(); </script>
    
    <style>#adsense
    {display:none !important;}</style>
    
    <script type="text/javascript" language="javascript">
             
        var i=0;
        setInterval('changeColor()',500);
            function changeColor(){
                var div1=document.getElementById('character1'); 
              
                var colorArr1=['#8A2BE2','#DEB887','#7FFF00','#008B8B','#FF1493','#DA70D6','#B0C4DE']; 
               
                if(i==colorArr1.length){ 
                        i=0;
                    }else{
                        div1.style.color=colorArr1[i++%colorArr1.length]; 
                       
                    }
                }
            
            
            </script>
            </body></html>
    

    在这里插入图片描述

    展开全文
  • WEBPS PHOTO(WEBPS照片处理...你当前看到的是WEBPS_PHOTO单机版(或称WEBPS照片处理软件),软件应用范围:照片处理,照片编辑,照片制作,照片合成,照片背景处理,照片尺寸修改等,这是一部专业的照片制作处理软件。
  • WEB入门.八 背景特效

    千次阅读 2017-02-18 20:19:19
    学习内容 background属性CSS Sprite 技术 滑动门技术能力目标使用background设置网页背景 使用Sprites制作平滑投票特效使用滑动门技术实现Tab菜单本章简介在前面章节中,已经系统地讲解了页面设计中常见的布局...

    学习内容


    •   background属性
    • CSS Sprite 技术
    •  滑动门技术

    能力目标

    • 使用background设置网页背景
    •  使用Sprites制作平滑投票特效
    • 使用滑动门技术实现Tab菜单

    本章简介

    在前面章节中,已经系统地讲解了页面设计中常见的布局模型,主要内容涉及到流动模型和浮动模型。理解了如何在盒子模型的基础上,使用流动模型与浮动模型设计出如网易、淘宝等大型门户网站的页面布局。

    一个完整的页面在完成布局设计后,需要增强页面的内容及视觉表现效果。本章将讲解如何使用background属性为页面添加背景,实现页面背景平铺以及背景定位功能。另外,本章内容将讲解如何使用页面图片整合技术减少客户端对服务器的请求;制作论坛的平滑投票特效;使用滑动门技术实现背景随着内容多少自适应的效果,完成页面Tab导航菜单。

    4.1 background属性

    在传统的页面设计中,设计师使用 img标签向网页中添加大量的图像,这种做法导致服务器处理客户端的请求增多,页面加载速度变慢。为了减少页面上的背景图片数量,可以使用 CSS Sprites将多张小图片整合到一张图片中,再使用 background进行背景图像定位显示来提高页面加载速度。所以对于网页固定位置上的图片,应尽量使用 CSS 的 background属性进行设置,减少img标签的使用。

    以下介绍 background 属性常用参数的用法,包括 background-image、background-repeat、background-position等。

    4.1.1      background-image 属性

    背景图像background-image属性用来定义图像背景路径。

    background-image: none |url ( url )


    取值说明:

    none:默认值,无背景图。

    url (url):使用绝对或相对url地址指定背景图像。

    4.1

    CSS代码:

    <style type="text/css">

    #header{

        height:95px;

        width:600px;

        background-image:url(headerbg.png);

        margin:0pxauto;

    }

    </style>

    XHTML代码片段:

    <body>

    <div id="header"></div>

    </body>


    4.1.1      background-repeat 属性

    设置元素中背景图像的重复方式,制作重复的背景图像。

        background-repeat :  repeat | no-repeat|repeat-x | repeat-y

    取值说明:

    repeat:默认值,背景图像在纵向和横向上平铺。

    no-repeat:背景图像不平铺。

    repeat-x:背景图像仅横向平铺。

    repeat-y:背景图像仅纵向平铺。

    4.2

    CSS代码:

    <style type="text/css">

    #book{

        background-image:url(images/hrepeat.jpg);

        background-repeat:repeat-x;

        width:600px;

        height:400px;

        border:3pxdouble gray;

    }

    span{

        font-size:50px;

        font-family:"华文隶书";

        color:red;

        display:block;

        padding:200px;

    }

    </style>

    XHTML代码片段:

    <body>

    <div id="book">

        <span>精美台历</span>

    </div>

    </body>


     

    4.3

    #book{

        margin:100px;

        background-image:url(images/vrepeat.jpg);

        background-repeat:repeat-y;

        width:600px;

        height:400px;

        border:3pxdouble gray;

    }

    在浏览器中的运行效果如图 4.1.3所示。


    4.1.1      background-position 属性

    background-position属性用来设置背景的起始位置。

    background-position: length | length

    background-position: position | position

    取值说明:

    length:百分数|长度值。

    position:top|center|bottom|left|center|right。

    (1)          默认值为 0%、0%,此时背景图片将被定位在对象不包括边距(padding)的内容区域左上角。100%、100%此时背景图片将被定位在对象不包括内边距的内容区域右下角。

    (2)          指定 1 个值,该值为横坐标,纵坐标默认为 50%。

    (3)          指定2个值,其中第一个值为横坐标,第二个用于纵坐标。

    (4)          设置值为 right center,因为 right作为横坐标值会覆盖center值,背景图片将居右定位。

    (5)          postion可以取负值,positionX取负值时表示背景图像向左移动,positionY取负值时表示背景图像向上移动。

    (6)          position 的值可以取百分比,此时图像的移动方向由另一个值的方向决定。如background-position;100% -50px;时. 其含义是向 X轴左方向移动,保证图像的右侧位置与元素的右侧重合,在Y轴方向上移动 50px。

    4.4

      CSS代码:

    <style type="text/css">

    body{

        padding:0px;margin:0px;

        background-image:url(bg5.jpg);/*背景图片 */

        background-repeat:no-repeat;    /* 不重复 */

        background-position:0% 0%;  /* 背景位置,百分比 */

    }

    p{

        padding:10px;margin:5px;

        line-height:1.5em;

    }

    </style>

    XHTML代码片段:

    <body>

        <p>CSS(Cascading Style Sheet),中文译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。CSS是1996年由W3C审核通过,并且推荐使用的。简单的说CSS的引入就是为了使得HTML能够更好的适应页面的美工设计。</p>

    </body>


    background-position:100%100%;  /* 背景位置,百分比 */

    background-position:right center;   /* 背景位置 */


    background-position:0% 20px;    /* 背景位置,百分比 */


    background-position:100% -42px; /* 背景位置,百分比 */     

    下面通过一个综合案例演示一下background属性的用法。

    4.5

      CSS代码:

    <style type="text/css">

    ul#menu { width:300px; height:300px; margin:0pxauto; padding:0px;   background:url(images/02.jpg)}

    ul#menu li { list-style-type:none; float:left;width:100px; height:100px;}

    ul#menu li a { display:block; width:100px;height:100px;  text-decoration:none;background: url(images/01.jpg) no-repeat 100px 100px;}

    a#item1:hover {background-position: 0 0; }

    a#item2:hover {background-position: -100px 0;}

    a#item3:hover {background-position: -200px 0;}

    a#item4:hover {background-position: 0 -100px;}

    a#item5:hover {background-position: -100px -100px;}

    a#item6:hover {background-position: -200px -100px;}

    a#item7:hover {background-position: 0 -200px;}

    a#item8:hover {background-position: -100px -200px;}

    a#item9:hover {background-position: -200px -200px;}

    </style>

    XHTML代码片段:

    <body>

    <ul id="menu">

       <li><a id="item1" href="#" title="Item1">&nbsp;</a></li>

       <li><a id="item2" href="#" title="Item2">&nbsp;</a></li>

       <li><a id="item3" href="#" title="Item3">&nbsp;</a></li>

       <li><a id="item4" href="#" title="Item4">&nbsp;</a></li>

       <li><a id="item5" href="#" title="Item5">&nbsp;</a></li>

       <li><a id="item6" href="#" title="Item6">&nbsp;</a></li>

       <li><a id="item7" href="#" title="Item7">&nbsp;</a></li>

       <li><a id="item8" href="#" title="Item8">&nbsp;</a></li>

       <li><a id="item9" href="#" title="Item9">&nbsp;</a></li>

    </ul>

    </body>



    初始状态下,超链接背景位置设置成 background-position:l00pxl00px,而它的大小是l00px*l00px,所以超链接背景超出可视范围而无法显示时,黑白照片成为ul的背景图像;当鼠标移动到超链接上,根据超链接设置的背景位置移动背景,形成黑白与彩色图片交替效果,如图4.1.6所示。


    注意以每个图片的左上角为0 ,0点;

    4.1 滑动门技术

    4.1.1      什么是滑动门技术

    滑动门概念来源于生活中的推拉门,它通过改变重叠区域的大小来改变占据的空间。在页面设计中,通常利用滑动门原理制作导航菜单,导航栏会根据文本自适应大小,进行滑动。

    可以利用两个独立的背景图像实现滑动门,它们分别居于左右。将两幅图像想象为两扇可滑动的门,当二者滑至重叠状态时,占据一个较小的空间;反之,当二者分离开来,则占据一个较大的空间,如图 4.1.17所示。

    图4.1.17  滑动门原理

    4.1.2      滑动门实现原理

    (1)          标签结构,代码如下:

    <ul id="tabs">

    <li><a href="#"><span>国际新闻</span></a></li>

       <li><a href="#"><span>国内新闻</span></a></li>

       <li><ahref="#"><span>NBA</span></a></li>

    </ul>

    (2)          设置A的背景为背景的左半部分,span的背景为右半部分,如图 4.1.8所示。



    实现思路:

    准备菜单左侧的 tableft.gif和右侧的 tabright.gif背景图像,每个菜单的结构采用 span标签和 a标签制作;a标签的背景采用tableft.gif,span标签的背景采用 tabright.gif;背景图像不重复。

    制作步骤如下:

    (1)          采用 span标签和超链接搭建导航栏结构,代码如下:

    <div id="tabs1">

      <ul>

       <li><a href="#" title="Link 1"><spanid="test">首页</span></a></li>

       <li><a href="#" title="Link2"><span>新闻</span></a></li>

       <li><a href="#" title="Link3"><span>促销</span></a></li>

        <li><a href="#"title="Longer Link Text"><span>全球购</span></a></li>

       <li><a href="#" title="Link5"><span>机票</span></a></li>

       <li><a href="#" title="Link6"><span>学生购物</span></a></li>

      </ul>

    </div>

    (2)          定义 tab 的样式属性,代码如下:

    #tabs1 {

        font-size:93%;

        float:left;

        width:100%;

        background:#F4F7FB;

        line-height:normal;

        border-bottom:1px solid #BCD2E6;

    }

    #tabs1 ul {

        margin:0;

        padding:10px 10px 0 50px;

        list-style:none;

    }

    #tabs1 li {

        display:inline;

        margin:0;

        padding:0;

    }

    (3)          定义超链接和 span标签的样式,代码如下:

    #tabs1 a{

        float:left;

        background:url("images/tableft1.gif")no-repeat left top;

        margin:0;

        padding:0 0 0 4px;

        text-decoration:none;

    color:red;

    }

    #tabs1 aspan {

      float:left;

     display:block;

     background:url("images/tabright1.gif") no-repeat right top;

      padding:5px15px 4px 6px;

    }

    (4)          定义菜单鼠标悬停下,超链接和 span标签的样式,代码如下:

    #tabs1 a:hover{

     background-position:0% -42px;

    }

    #tabs1 a:hoverspan {

      background-position:100%-42px;

    }

    其中 background-position用来设置背景图像的位置,允许为负值,如 background-position:100% -42px表示在 X轴方向右移动,保证图像的右侧位置与元素的右侧重合,在Y轴方向上移动42px。

    4.1.1     应用滑动门技术的玻璃效果菜单

    本例中要实现一个玻璃材质效果的水平菜单。为了表现出立体的视觉效果,以及玻璃的质感.必须借助图像才可以实现

    本例中用到了两个图像,分别作为整个菜单的背景色平铺使用的,和当鼠标指针经过某个菜单项的时候显示出来的。

    从效果图中可以看出,玻璃材质图是一个固定的图像文件,而菜单中的各个菜单项宽窄不一,却都可以完整地显示出来,这是如何实现的呢?这里使用的就是“滑动门”技术,它被广泛应用于各种CSS效果中,因此希望读者能够真正理解这个案例的本质原理。

    一、基本思路

    首先讲解滑动门技术的核心原理。图4.1.11中的箭头表示了两个圆角矩形图像的滑动方向。较深颜色区域表示二者重叠的部分,当需要容纳较多文字时,重叠就少一些,而需要较少文字时,重叠就多一些。两个图像可以滑动,重叠部分的宽度会根据内容自动调整,就像两扇推拉门一样,因此这种技术就被称为“滑动门”。


    <body>  

        <div id="menu">  

        <ul>  

           <li><a href="#"><b> Home </b></a> </li>  

           <li><a href="#"><b> Contact Us </b></a></li>  

           <li><a href="#"><b> Web Dev </b></a></li>  

           <li><a href="#"><b> Map </b></a></li>  

        </ul>  

        </div>  

    </body>

    可以看到,每个文字链接都是作为一个列表项目<li>出现的。此外,还对文字设置了加粗显示的效果,这不但可以使字体变粗,而且还可以作为设置玻璃材质背景的“钩子”使用。结合前面的滑动门的原理,可以知道,为了实现滑动门需要两个背景图片,因此就需要两个“钩子”来分别设置背景图片,这里的<a>标记和<b>标记就分别承担了左右门的钩子的任务。

    二、设置菜单整体效果

    下面设置菜单的整体效果。

    ① 设置文字的字体和字号,井设置菜单的总体宽度,这个宽度值可以先设一个比较大的值,等最终效果做好以后,再调整到合适的值,代码如下。

    #menu {   

      font-family:Arial;   

      font-size:14px;   

      width:400px;   

    }

    ② 设置ul的样式,代码如下。

    #menu ul {   

      display:block;      

      width:500px;   

      padding:0 0 0 8px;   

      margin:0;    

      list-style:none;    

      height:35px;    

    }

    这里首先设置了padding和margin,然后将list-style属性设置为none,这样可以取消每个列表项目前面的圆点。然后设置高度为35像素,这正是背景图像的高度,最后将背景设置为图像所在的地址。

    ③ 设置#menu容器中的li的属性。li原本就是块级元素,这里将其设置为向左浮动,这样将使得各列表横向排列,而不是默认的竖直排列,代码如下。

    #menu ul li {   

      float:left;   

    }

    ④ 将a元素设置为块级元素,这样整个矩形范围内都会响应鼠标事件,代码如下。

    #menu ul li a{   

      display:block;   

      float:left;    

      line-height:35px;    

      color:#ddd;   

      text-decoration:none;   

      padding:0 0 0 14px;  

    }

    上面这段代码中,将a标记设置为块级元素以后,设置了行高line-height属性。设置行高可以使文字竖直方向居中排列。然后将文字设置为浅灰色,并取消链接的下划线。最后,设置padding属性,在每个菜单项的左侧设置了14像素的内边距。

    这时的效果就已经完成了基本设置。接下来就是最关键的任务了——设置菜单项的背景。

    三、使用“滑动门”技术设置玻璃材质背景

      ① 首先设置a元素的鼠标经过效果,代码如下。

    #menu ul li a:hover{   

      color:#fff;    

      background: url(hover.gif);  

    }

    这里将文字设置为白色,然后将玻璃质感的图像文件地址作为背景属性的值,此时在浏览器中查看的话就已经有变化效果了。

    注意:可以看到,鼠标指针经过时,玻璃材质的背景已经出现了,但是它的右边被齐刷刷地切断了,而没有出现背景图像的右端。这个问题如何解决呢?

    在CSS中是不能使图像的宽度缩放的。解决方案之一是为每一个菜单项创建各自宽度的背景图像,但是显然适应性要差很多,而且会需要多个图像文件,增加下载的流量,因此不是一个好办法。

    另外一个可行的解决方案是使用前面在HTML中设置的文字加粗标记<b>。基本思想就是把<b>标记作为“钩子”来设置CSS样式,因此可以再为它的背景设置一个背景圈像。这个背景图像仍然使用惟一的玻璃材质图像文件,不同的是这次从右向左展开,这样就可以出现右边的端点了。具体的方法如下。

    ② 对b标记的属性进行设髓,这里仅需将其设置为块级元素就可以了,代码如下。

    #menu ul li a b{   

      display:block;  

    }

    ③ 设置在鼠标指针经过时的b标记样式。这是很关键的一个步骤,代码如下。

    #menu ul li a:hover b{  

      color:#fff;    

      background: url(hover.gif) no-repeat rightright top;  

    }

    上面的代码中首先设置文字颜色为白色,这样鼠标指针经过时效果会更加醒目。然后设置背景图片。这个图片将会覆盖在前面定义的“#menu ul li a:hover”中没置的图片的上面。这两个图片实际上是同一个图片,后面的“no-repeat right top”设定了这个背景图的铺设方式,只显示一次,并从右上角开始铺设。

    ④ 这样基本上已经成功了,只是背景图像还不对称,右边还应该增加一些空白,这只需要在“#menu ul Ii a b”的样式中增加一条内边距的样式,在最右侧对称地增加14像索内边距即可,代码如下。

    #menu ul li a b{   

      display:block;   

      padding:0 14px 0 0;  

    }

    此时在浏览器中的效果如图1所示,这正是我们需要的效果。

    四、进一步解决的问题

    1.修饰菜单项的文字

    这里需要提示一点。为了能够增加玻璃材质的背景图像,我们使用了b标记作为“钩子”,来挂接CSS样式,这样菜单项的文字就以租体显求了,如果不想使用粗体,那么也很简单,只需要在“#menu uI li a b”和“#menu ul li a:hoverb”两个选择器中分别增加一条样式,使文字的粗细为正常(normal)即可。

    2.菜单的背景随浏览器窗口扩展

    此外,由于设置了#menu容器的width属性(500px),因此这个导航菜单的宽度就是固定的了,而有时可能希望菜单的背景随浏览器窗口的扩展而扩展。

    为了实现自动扩展,可以进行如下尝试。对#menu的设置有如下代码:

    #menu {   

      font-family:Arial;   

      font-size:14px;   

      width:400px;   

    }

    将其修改为:

    #menu {   

      font-family:Arial;   

      font-size:14px;   

      margin:0 auto 0 0;  

      background:url(under.gif);   

    }

    这样简单的修改确实实现了可以随浏览器窗口扩展。

    3.设置滚动条

    这时又出现了新的问题,当浏览器变窄以后,菜单项会自动折行。在大多数情况下,并不希望出现这种效果,而是希望窗口变窄到一定程度时自动出现滚动条。

    这是如何实现的呢?原来蓝色的背景图像是设置在ul的下面的,为了实现菜单项不自动折行,就要给ul设置width属性.这样就会导致背景图像也无法扩展。解决方法是将背景图像从ul移动到#menu容器中,这样背景图像会随着#menu容器的扩展而扩展,同时ul设置宽度后,又限制了菜单项的自动折行。修改后的代码如下。至此本案例全部完成。

    #menu {   

      font-family:Arial;   

      font-size:14px;   

      margin:0 auto 0 0;  

      background:url(under.gif);   

    }   

        

    #menu ul {   

      display:block;      

      width:500px;   

      padding:0 0 0 8px;   

      margin:0;    

      list-style:none;    

      height:35px;    

    }

    4.1.1     应用滑动门技术制作投票

    许多门户网站,用户可以对文章进行评论、打分,下面将演示一个平滑图片投票特效的制作过程



    代码:

    <head>

            <title>4.3</title>

            <styletype="text/css">

                      .starts{

                    list-style:none;

                    margin:0px;

                    padding:0px;

                    width:650px;

                          height:125px;

                    position:relative;

                    background:url(start.jpg)0px 0px repeat-x;

                    overflow:hidden;

                }

                      .starts li a{

                    position:absolute;

                    display:block;

                    width:130px;

                    height:123px;

                    text-decoration:none;

                    z-index:2;

                    padding:0px;

                    margin:0px;

                   }

                .startsli a:hover{

                    background:url(start.jpg)-1px -125px;

                    z-index:1;

                    left:0px;

                             top:0px;

                }

                .startsa.start1{

                    left:0px;

                }

                .startsa.start1:hover{

                    width:130px;

                }

                      .starts a.start2{

                    left:130px;

                }

                .startsa.start2:hover{

                    width:260px;

                }

                         .starts a.start3{

                    left:260px;

                }

                .startsa.start3:hover{

                             width:390px;

                }

                         .starts a.start4{

                    left:390px;

                }

                .startsa.start4:hover{

                    width:520px;

                }

                .startsa.start5{

                             left:520px;

                }

                .startsa.start5:hover{

                    width:650px;

                }

            </style>

           </head>

           <body>

                  <ulclass="starts">

                         <li><ahref="#" class="start1"></a></li>

                         <li><ahref="#" class="start2"></a></li>

                         <li><ahref="#" class="start3"></a></li>

                         <li><ahref="#" class="start4"></a></li>

                         <li><ahref="#" class="start5"></a></li>

                  </ul>

           </body>

    </html>

                            本章总结

    (1)本章主要讲解background属性以及background-repeat,background-position属性。

    (2) 利用滑动门技术我们可以制作出华丽的菜单效果。


    任务实训部分

    实训任务1:制作重复背景效果

    训练技能点

    Ø        使用background-image属性设置背景图像

    Ø       使用background-repeat属性设置平铺效果

    需求说明

           制作砖墙背景效果,效果如图4.2.1所示。

    图4.2.1 background-image属性

    实现思路

    (1)       使用div定义砖墙盒子(wall)。

    (2)       使用background-image(filepath)设置砖墙图片路径。

    (3)       使用 background-repeat:repeat-x;设置背景图像在水平方向平铺。

    关键代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <htmlxmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <style type="text/css">

    #wall{

        background:url(images/28-1.gif)repeat-y;

        width:800px;

        height:400px;

        padding-left:137px;

    }

    </style>

    </head>

    <body>

    <div id="wall"></div>

    </body>

    </html>

    实训任务2:制作在线编辑器

    训练技能点

    Ø        使用background-position属性定位图像

    Ø       使用background-repeat属性设置平铺效果

    需求说明

           制作HTML在线编辑器页面,效果如图4.2.2所示。

    图4.2.2 background-position属性

    实现思路

    (1)       使用div定义command盒子。

    (2)       使用span标签定义命令按钮,并使用float属性设置span为浮动元素。

    (3)       使用background属性为span标签设置背景图像,在水平和垂直方向不使用平铺。

    (4)       使用background-position属性为指定的span标签设置背景定位。

    关键代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <style type="text/css">

    span{

        display:block;

        width:17px;

        height:16px;

        background-image:url(images/editor.gif);

        background-repeat:no-repeat;

        text-indent:-999em;

        float:left;

        margin:2px;

    }

    .bold{

        background-position:0px0px;

    }

    .italic{

        background-position:-17px0px;

    }

    .underline{

        background-position:-34px0px;

    }

    .color{

        background-position:-108px0px;

    }

    .link{

        background-position:-126px0px;

    }

    .ol{

        background-position:-143px0px;

    }

    .ul{

        background-position:-160px0px;

    }

    .align_left{

        background-position:-232px0px;

    }

    .align_center{

        background-position:-252px0px;

    }

    .align_right{

        background-position:-270px0px;

    }

    #command,#cc{

        margin:2pxauto;

        padding-left:300px;

    }

    </style>

    </head>

    <body>

    <div id="command">

        <spanclass="bold" title="粗体">粗体</span>

        <spanclass="italic" title="斜体">斜体</span>

        <spanclass="underline" title="下划线">下划线</span>

        <spanclass="color" title="颜色">颜色</span>

        <spanclass="link" title="链接">链接</span>

        <spanclass="ol" title="项目编号">项目编号</span>

        <spanclass="ul" title="项目符号">项目符号</span>

        <spanclass="align_left" title="左对齐">左对齐</span>

        <spanclass="align_center" title="居中">居中</span>

        <spanclass="align_right" title="右对齐">右对齐</span>

    </div>

    <divstyle="clear:both"></div>

    <div id="cc">

     <textarea name="textarea" cols="50"rows="10"></textarea>

    </div>

    </body>

    </html>

    需求说明

    制作树形菜单框架,实现图书分类,效果如图4.2.3所示。

    图4.2.3 树形菜单

    提示:

    (1)       使用div和ul搭建树形菜单框架。

    <div class="tree">

        <divclass="max">计算机类</div>

       <ul>

           <liclass="min">JAVA编程</li>

           <li class="min">C#编程</li>

           <li class="min">SQL编程</li>

       </ul>

    </div>

    (2)       定义一级目标max的样式。

    .max{

        position:relative;

        width:auto;

        height:16px;

        background:url(images/sprite.png)0px -350px;

        background-repeat:no-repeat;

        padding-left:16px;

    }

    (3)       定义二级目录min的样式规则。

    .min{

        position:relative;

        width:auto;

        height:16px;

        background:url(images/sprite.png)0px -400px;

        background-repeat:no-repeat;

        list-style-type:none;

        margin-top:2px;

        padding-left:16px;

        font-size:10px;

    }

    实训任务3:制作QQ空间的Tab菜单

    训练技能点

    Ø        使用滑动门技术制作菜单结构

    Ø        使用background-position属性定位背景

    Ø       使用background-repeat属性设置平铺效果

    需求说明

    制作QQ空间主页Tab菜单,效果如图4.2.4所示。


    (1)      在a标签中嵌套span标签。

    (2)      a标签采用左侧背景图像,span标签采用菜单右侧背景图像。

    (3)      使用background-position属性定位背景图像。

    关键代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <htmlxmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type"content="text/html; charset=utf-8" />

    <title>无标题文档</title>

    <style type="text/css">

    body{

        margin:0px;

        padding:0px;

        font: bold12px/1.5em Verdana;

    }

    img{

        border:none;

    }

    #menu{

        float:left;

        width:100%;

        font-size:93%;

        border-bottom:1pxsolid #2763a5;

        line-height:normal;

    }

    #menu ul{

        margin:0px;

        padding:10px10px 0pa 50px;

        list-style:none;

    }

    #menu li{

        display:inline;

        margin:0px;

        padding:0px;

    }

    #menu a{

        float:left;

        background:url(images/tableft.gif)no-repeat left top;

        margin:0px;

        padding:0px0px 0px 4px;

        text-decoration:none;

    }

    #menu a span{

        float:left;

        display:block;

        background:url(images/tabright.gif)no-repeat right top;

        padding:5px15px 4px 6px;

        color:#FFF;

    }

    #menu a:hover{

        background-position:0%-42px;

    }

    #menu a:hover span{

        background-position:100%-42px;

    }

    </style>

    </head>

    <body>

    <div id="menu">

        <ul>

            <li><a href="#"title="首页"><span>首页</span></a></li>

           <li><a href="#" title="日志"><span>日志</span></a></li>

           <li><a href="#" title="相册"><span>相册</span></a></li>

           <li><a href="#" title="留言"><span>留言</span></a></li>

       </ul>

    </div>

    </body>

    </html>

    实训任务4:制作QQ空间的应用列表

    需求说明

    在“指导部分”基础上,完成QQ空间页面应用列表部分,效果如图4 .2 .5所示。


    图4.2.5 应用列表

    提示:

    (1)       主页导航菜单的制作参考阶段3指导部分代码。

    (2)       使用div定义除页面导航栏之外的框架,代码如下:

    <div id="content">

    <div id="left">左栏部分</div>

        <divid="left">中间栏</div>

        <divid="left">右栏部分</div>

    </div>

    (3)       使用div和ul定义应用列表结构,span定义左栏的标题,代码如下:

    <span class="title">应用列表</span>

    <ul>

        <liclass="one">信息中心</li>

        <liclass="two">好友日志</li>

        <liclass="three">听音乐</li>

        <liclass="four">心情</li>

        <liclass="five">投票</li>

        <liclass="six">礼物</li>

        <liclass="seven">分享</li>

        <liclass="eight">好友问问</li>

        <liclass="nine">好友买卖</li>

        <liclass="ten">小纸条</li>

        <liclass="eleven">好友管理</li>

        <li class="twelve">空间设置</li>

    </ul>

    (4)       定义左栏的样式规则left,样式属性包括:宽度为父级容器的20%,边框颜色为#C2DDE6,背景颜色为white。

    (5)       定义标题样式规则title,样式属性包括:display:block;宽度自适应及背景图像。

    (6)       定义li的背景图像,背景在水平方向和垂直方向不平铺。

    (7)       使用background-position属性为指定的li元素设置背景图像定位,实现显示不同背景的效果。

    (8)       设置li的左内边距,大小为背景图像的宽度。

     

     

     

     

     

    巩固练习

    一、选择题

    1. 以下选项,不属于background属性的参数是()。

        A. background-image

        B. background-repeat

        C. background-position

        D. background-url

    2、 以下关于background说法正确的是()。

        A. background只能设置页面的背景颜色

        B. background用来设置页面元素的背景图像

        C. background不能够精确定位背景图像

        D. background属性默认情况下只在水平方向重复背景图像

    3. 以下关于 CSS  Sprites 图片整合技术的优点说法不正确的是()。


        A. 图片整合技术可以加快页面浏览的速度

        B. 图片整合技术可以减少对服务器的请求

        C. 图片整合技术可以减少请求图像文件的字节数

        D. 图片整合技术会加重对服务器的负担

    4. 在 CSS  Sprites 图片整合技术中,实现背景定位的是()。

        A. background-image

        B. background-url

        C. position

        D. background-position

    5. 下列关于滑动门技术说法错误的是()。

        A. 滑动门技术采用两张图片重叠的方式实现

        B. 滑动门技术应用于背景自适应

        C. 滑动门技术可以根据元素内的文字自动改变背景的宽度

        D. 滑动门技术只能应用于导航菜单的制作

     

    二、操作题

    在指导练习基础上完善QQ空间主页,效果如图4 .3 .1所示。


    提示:

    (1)      使用div定义中间栏的页面结构,代码结构如下。

    <div id="middle">

        <spanclass="title">信息中心</span>

        <!--图像采用绝对定位,脱离文档流,显示在modeify和state层之上-->

        <imgsrc="images/head.png">

        <divid="modif"><a href="#">[修改资料]</a></div>

        <divid="state">工作中请勿打扰</div>

        <!--中间栏tab页-->

        <divid="middle_menu1">

           <span class="menul">写心情</span>

           <span class="menu2">分享</span>

           <span class="menu3">写日志</span>

           <span class="menu4">传照片</span>

       </div>

        <divsytle="clear:both"></div>

        <divid="info">

            <textarea class="teaxtarea"cols="35" rows="6">我在做什么...</textarea><br/>

           <input type="button" id="buttn"style="margin:5px;background-color:#c2dde6;                     

            width:50px;height:21px; " value="发表"/><br/><br/>

           <a  href="#"><span>最新动态</span></a>

           <a href="#"><span>空间动态</span></a>

           <a href="#"><span>QQ好友</span></a>

           <a href="#"><span>QQ群</span></a>

           <a href="#"><span>关注友人</span></a>

           <a href="#"><span>全新 </span></a>

           <a  href="#"><span>日志 </span></a>

           <a href="#"><span>心情 </span></a>

           <a href="#"><span>相册 </span></a>

       </div>

    </div>

    (2)      定义middle_menu1中span标签为相对定位,top值为1px,并且定义span下边框为白色,覆盖info盒子的上边框,代码片段如下。

    #middle_menu1 {

        display:block;

        float:left;

        width:300px;

        height:15px;

        padding-left:60px;

        border-bottom:3pxsolid white;

        z-index:20;

    }

    (3)      使用background属性为span标签设置背景,并且定义第一个span标签的上边框、做边框、右边框。

    #middle_menu1 .menul{

        border-top:1pxsolid #C2DDE6;

        border-left:1pxsolid #C2DDE6;

        border-right:1pxsolid #C2DDE6;

        background:url(images/1.gif)no-repeat 0px -5px;

    }

    #middle_menu1 .menu2{

        border-top:1pxsolid #C2DDE6;

        border-left:1pxsolid #C2DDE6;

        border-right:1pxsolid #C2DDE6;

        background:url(images/1.gif)no-repeat 0px -19px;

    }

    . . . .


    展开全文
  • html+css自制照片墙案例 web前端页面制作入门级案例
  • 用于上传照片Web应用程序 描述 完全动态生成的文件上传窗口。 渲染图像后,可以将它们上传到服务器并获得图像的链接。 一项免费服务被用作后端-Firebase 有机会选择可以下载的文件扩展名重要提示:仅对标准扩展...
  • 用图片做背景的文字显示效果--前端实战小案例 想练习更多前端案例,请进个人主页,点击前端实战案例->传送门 觉得不错的记得点个赞?支持一下我0.0!谢谢了! 不积跬步无以至千里,不积小流无以成江海。 效果...

    前端实战小案例--用图片做背景的文字显示效果

    想练习更多前端案例,请进个人主页,点击前端实战案例->传送门

    觉得不错的记得点个赞?支持一下我0.0!谢谢了!

    不积跬步无以至千里,不积小流无以成江海。

    效果图如下:

    代码如下:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>用图片做背景的文字显示效果</title>
    	</head>
    	<style>
    		html,body{
    			margin: 0;
    			padding: 0;
    			background-color: #333;
    			font-family: "Montserrat",sans-serif;
    		}
    		h1{
    			font-size: 200px;
    			font-weight: 900;
    			text-transform: uppercase;
    			letter-spacing: 20px;
    			position: absolute;
    			top: 50%;
    			left: 50%;
    			transform: translate(-50%,-50%);
    			margin: 0;
    			background: url(imgs/bg.jpg) 50% 50%;
    			background-size: cover;
    			/* 填充颜色随父元素 */
    			-webkit-text-fill-color: transparent;
    			/* 裁剪文字区域外的部分 */
    			-webkit-background-clip: text;
    		}
    	</style>
    	<body>
    		<h1>text</h1>
    	</body>
    </html>

     

    展开全文
  • css如何设置网页背景图片?

    千次阅读 2021-06-10 12:40:09
    下面本篇文章就给大家介绍css设置网页背景图片的方法,希望对大家有所帮助。在CSS中,可以使用background-image属性和background属性来设置背景图片。background-image属性用于设置一个元素的背景图像;元素的背景是...
  • 很精美又简约的一个照片墙,用css写成。
  • U-2-Net是一个相当不多的项目,一位在加拿大阿尔伯塔大学留学的中国人的(https://webdocs.cs.ualberta.ca/~xuebin/),可以基于它很多关于图像处理的项目。 rembg可以选择U-2-Net训练出来的多种模型: 通用...
  • Chromecast使用的一些背景照片 500px以上的数个流 来自reddit的几个来源 来自Flickr的有趣照片 注意:不支持本地文件系统中的照片。 许多选项可用于控制幻灯片的外观,包括: 机器闲置后显示屏幕保护程序的等待...
  • Web 前端,以及用于通过电子邮件分发这些照片的脚本 背景 我住在离家人很远的地方,这是我们保持联系的一种方式。 我们都可以提交过去一起度过的照片,其中一张照片每天都会通过电子邮件发送给我们所有人。 这不是有...
  • 常见六大Web安全攻防解析

    千次阅读 多人点赞 2019-06-26 12:42:19
    前言 在互联网时代,数据安全与个人隐私受到了前所未有的挑战,各种新奇的攻击技术层出不穷。如何才能更好地保护我们的数据?本文主要侧重于分析几种常见...跨站脚本攻击是指通过存在安全漏洞的Web网站注册用户的浏...
  • 于是,想到一个解决方法,把所有导航、按钮等等小模块都放在背景图里,再在对应的地方放透明的按钮,在视觉上的效果像是点击了一个图片按钮,其实是点击了一个透明按钮。 在遇到这个问题之前,实现过类似的需求,...
  • 下了两天的雨,今天终于放晴了,而且还是阴天的天气,有微风,没有热辣的太阳,这让小编不禁感到了一股秋...或者是说给文字添加一个图片背景色?答案当然是可以的啦,小编已经把方法放在下边了哦,快来围观~首先需要...
  • web端实现图片下载

    2020-08-28 10:50:59
    很多时候,前端需要将二维码和背景图片组合,然后生成一张海报,供用户下载分享 2、功能实现 使用canvas绘制海报 调用canvas的toDataURL()方法,生成base64编码 上传到图片服务器(移动端直接下载base64会报错) ...
  • Web案例——制作简历

    2021-07-11 08:03:12
    第二行第七列:照片这一单元格,长度占据了4行 第三行第四列:宽度占据3列 第四行第四列:宽度占据3列 第五行第四列:宽度占据5列 第六行第四列:宽度占据6列 二、代码实现 1、表格总体结构实现,边框为1...
  • 如何设置背景图片的大小?

    千次阅读 2019-09-28 09:54:09
    background-size:auto; background-size:某某px; background-size:某某%; background-size:cover;...background-size:contain;...5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
  • web中的图片(img/background)操作

    千次阅读 2018-12-01 15:50:45
    web图片的格式(大部分格式) 图片格式 压缩方式 透明度 动 画 适应场景 jpg 有损压缩 不支持 不支持 照片|文章配图|广告图 png 无损压缩 支持 不支持 透明图|图标...
  • 全屏背景的意思就是背景图占满整个浏览器视窗,在没有body其他内容的时候不出现滚动条。就算有滚动条的时候,背景也是固定的,不跟随滚动。对于这类的全屏背景图片的实现,我们需要注意的是,有五种情况:图片很小...
  • 透明背景的图片(比如图标)不要用此方法,保存完后透明背景会变成白色背景。 二.使用CSS来设置 1.可以设置图片的宽和高,前者为宽,后者为高。只设置一个值时,图片将等比缩放。当设置的两个值与原比例不同时,图片...
  • web页面图片放大

    千次阅读 2019-12-25 17:57:59
    文章目录图片放大 方式一图片放大 方式二 图片放大 方式一 借鉴于 https://blog.csdn.net/Lxinccode/article/details/80353060 <div class="evidenceImgDiv"> <img src=...z=0&...
  • 在里面搜索Background Image Plus这款背景图片插件。如图点击install ,小编这里已经安装,所以这里是Uninstall。安装好以后会提示要重启IDEA,我们重启二、重启以后,我们点击IDEA的菜单栏的VIew标签>点击Set ...
  • 背景 Meteor 通过将整个客户端和服务器堆栈移动到 JavaScript 来简化单页、实时、流数据更新应用程序的开发。 Meteor 在整个堆栈中提供了优雅一致的高级“React式”编程模型。 了解如何在几分钟内构建一个 Web 可...
  • 我在用myeclips中的JSP界面时怎么也插入不了图片,也不知道图片应该放在哪个文件夹下,求指导
  • HTML网页背景添加图片

    千次阅读 2020-04-13 18:14:11
    在网页中添加不重复、全覆盖、图片长宽比不变的网页背景 具体步骤如下: 将待添加的图片放到.jsp同一目录下,这样写URL比较方便 在<body> 标签中添加 background=… <body background="view.jpg" style=...
  • web——html个人简历

    千次阅读 2021-04-12 12:36:00
    web——html个人简历一、代码二、小技巧1.html table表格边框变成实线2.html 使整个页面居中 一、代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></...
  • HTML5页面背景切换

    千次阅读 2018-04-23 17:33:29
    使用js主要代码:一、切换body图片 &lt;script type="text/javascript"&... //定义一个存放照片位置的数组,可以放任意个,在这里放3个var arr = new Array();arr[0] = "i...
  • html – 将背景图像保持在底部

    千次阅读 2021-06-14 00:32:48
    我的目标是坚持底部的背景并显示在其他所有背后(因此低z-index).我有顶部的下面的代码(有一个中间,这只是块颜色,只是添加到正文): .background { position: absolute; top: 0; width: 100%; height: 600px; ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 14,996
精华内容 5,998
关键字:

web照片做背景