background attachment

background attachment相关知识

• web前端-CSS3属性学习（2）-背景属性（Background）

  W3C中第二部分为背景属性（Background），共列举9个属性：background、background-attachment、background-color、background-image、background-position、background-repeat、background-clip、background-origin、background-size。背景属性在CSS中运用广泛，目前各大浏览器都支持9个属性。详细学习： http://www.w3school.com.cn/cssref/index.asp。 下为简单介绍： - 兼容性 background、background-attachment、background-color、background-image、background-position、background
• 学习扁平化博客风格后的纪要

  消除板块之间的间隙 font-size:0; 背景图片的处理 background: url('/imgs/back.jpg') no-repeat top center; background-attachment: fixed; background-size: cover;
• CSS background深入理解及应用

  Background background属性的简写用法, 常见背景属性的理解以及神奇的渐变色。 目录 background属性的简写用法 常见背景属性介绍 神奇的渐变色 background属性 background简写属性在一个声明中可设置所有的背景属性。 可设置属性如下: background-image: 设置背景图像, 可以是真实的图片路径, 也可以是创建的渐变背景; background-position: 设置背景图像的位置; background-size: 设置背景图像的大小; background-repeat: 指定背景图像的铺排方式; background-attachment:
• 【web前端面试题整理05】做几道前端面试题休息休息吧

  前言连续学了两天javascript的东西了，我们都累了，于是今天还是上一套面试题吧，大家一起休息休息，也为下个星期可能会有的面试准备下。题目一览CSS1.  overflow-x  属于 CSS2 还是 CSS32.  请列举几种可以清除浮动的方法（至少两种）3.  display:none  和  visibility:hidden  的区别是什么4.  请缩写以下代码：.box {     background-position: 10px 20px;     background-repeat: no-repeat;     background-attachment: fixed;    &n

background attachment相关课程

• 全面系统讲解CSS，从容面对日常使用，顺利搞定面试问答 CSS是前端开发过程中必不可少的知识点，也是难以彻底掌握的部分。本课程系统梳理CSS中各方面的知识点，帮助前端工程师更清晰地了解实际工作中如何应用CSS技术的，更好地面对日常使用和顺利通过面试关！

  讲师：TooooBug 初级 2128人正在学习

• CSS深入理解之border 本课程将深入讲解CSS中的border属性，深入介绍border-color之间的关系，以及border与background定位、border与透明边框，并教你如果使用border进行图形构建，以及如何借助border使用有限标签完成我们的布局。

  讲师：张鑫旭 中级 56542人正在学习

• 十天精通CSS3 本课程为CSS3教程，对于有一定CSS2经验的伙伴，能让您系统的学习CSS3，快速的理解掌握并应用于工作之中。在学习教程的过程中实例演示结合在线编程完成任务的方式来学习，相信自己动手会让你理解的更快，本教程能够让您学习效果更好！

  讲师：大漠 初级 235729人正在学习

background attachment相关教程

• 5.2 发送带有附件的邮件 import smtplibfrom email.header import Headerfrom email.mime.text import MIMETextfrom email.mime.multipart import MIMEMultipart导入 smtplib 用于发送邮件导入类 Header 和 MIMEText 用于构造邮件导入类 MIMEMultipart 用于构造带有附件的邮件fromAddr ='zhangsan@qq.com'password = 'password for smtp'toAddr ='zhangsan@qq.com'subject = 'hello with attachment'content = '你好，请查收附件'fromAddr 为发送邮件地址toAddr 为目的邮件地址，设置成与发送邮件地址相同，表示向自己发送一封邮件password 是使用 SMTP 服务的密码，不是 QQ 邮箱的登录密码，请查看第 2 小节subject 是邮件标题content 是邮件内容def makeAttachment(filename): file = open(filename, 'rb') blob = file.read() attachment = MIMEText(blob, 'base64', 'utf-8') attachment["Content-Type"] = 'application/octet-stream' attachment["Content-Disposition"] = 'attachment; filename="%s"' % filename return attachment在第 1 行，函数 makeAttachment 构造一个附件在第 2 行到第 3 行，读取当前目录下的文件 filename 的内容在第 3 行，构造附件对象 attachment在第 4 行到第 5 行，设置附件属性def makeMail(): mail = MIMEMultipart() mail['From'] = Header(fromAddr, 'utf-8') mail['To'] = Header(toAddr, 'utf-8') mail['Subject'] = Header(subject, 'utf-8') mail.attach(MIMEText(content, 'plain', 'utf-8')) return mail在第 1 行，函数 makeMail() 根据 fromAddr、toAddr、subject、content 构造一封邮件在第 2 行，使用 MIMEMultipart 构造一个带有附件的邮件在第 3 行，构造邮件头 From在第 4 行，构造邮件头 To在第 5 行，构造邮件头 Subject在第 6 行，设置邮件的正文 contentdef sendMail(mail): server = smtplib.SMTP_SSL("smtp.qq.com") server.login(fromAddr, password) server.sendmail(fromAddr, toAddr, mail.as_string()) server.quit()在第 1 行，函数 sendMail 调用 SMTP 服务发送邮件 mail在第 2 行，获取 SMTP 服务器，使用 QQ 发送服务在第 3 行，登录 SMTP 服务在第 4 行，通过 SMTP 服务器发送服务mail = makeMail()attachment = makeAttachment('hello.c')mail.attach(attachment)sendMail(mail)print('发送邮件成功')在第 2 行，构造一个附件 hello.c在第 3 行，将附件加入到邮件中运行程序，在 QQ 邮箱中收到邮件：
• 1. 定义条形雪碧图动画 /* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(无限) */ animation: loading .6s step-end infinite;}/* 定义动画：动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标，第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标：-130 y坐标：0 */ 20% { background-position: -260px 0 } /* x坐标：-260 y坐标：0 */ 30% { background-position: -390px 0 } /* x坐标：-390 y坐标：0 */ 40% { background-position: -520px 0 } /* x坐标：-520 y坐标：0 */ 50% { background-position: 0 -130px } /* x坐标：0 y坐标：-130 */ 60% { background-position: -130px -130px } /* x坐标：-130 y坐标：-130 */ 70% { background-position: -260px -130px } /* x坐标：-260 y坐标：-130 */ 80% { background-position: -390px -130px } /* x坐标：-390 y坐标：-130 */ 90% { background-position: -520px -130px } /* x坐标：-520 y坐标：-130 */ to { background-position: 0 } /* 最后一帧不显示，可以随便写 */}/* 定义动画：动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}咦？条形图只需要定义两行？一个from一个to？？？是的，这就是为什么推荐制作雪碧图的时候做成一行的原因。你只需要定义一开始的时候图像在原点，然后最后的时候图像有多宽，你就写负多少：这个图是2600像素，所以to里面的background-position就是 -2600px。数了一下这张雪碧图里面一共有 12 个元素，所以 steps() 括号里面要写12。div 盒子的宽高应该正好和雪碧图里面的一个元素的宽高相对应：用雪碧图的 宽 2600 除以 12 等于 216.666… 无限循环。咱们取一个近似值，就 216px 吧。所以宽高设置为 216 * 300，怎么设置呢？要让加载动画结束之后（也就是定义加载动画的最后一帧）div 就变成这个宽高。/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(无限) */ animation: loading .6s step-end infinite;}/* 定义动画：动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标，第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标：-130 y坐标：0 */ 20% { background-position: -260px 0 } /* x坐标：-260 y坐标：0 */ 30% { background-position: -390px 0 } /* x坐标：-390 y坐标：0 */ 40% { background-position: -520px 0 } /* x坐标：-520 y坐标：0 */ 50% { background-position: 0 -130px } /* x坐标：0 y坐标：-130 */ 60% { background-position: -130px -130px } /* x坐标：-130 y坐标：-130 */ 70% { background-position: -260px -130px } /* x坐标：-260 y坐标：-130 */ 80% { background-position: -390px -130px } /* x坐标：-390 y坐标：-130 */ 90% { background-position: -520px -130px } /* x坐标：-520 y坐标：-130 */ /* 修改最后一帧，以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 216px; height: 300px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); }}/* 定义动画：动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -2600px }}
• 4. 异步 I/O 操作说明 异步 Socket 编程的一个关键点是：AsynchronousServerSocketChannel 和 AsynchronousSocketChannel 提供的一组 I/O 操作是异步的，方法调用完后会立即返回，而不会关心操作是否完成，并不会阻塞调用线程。如果要想获取 I/O 操作的结果，可以通过 Future 的方式，或者是 CompletionHandler 的方式。下面列举的 connect、accept、read、write 四组 I/O 方法，返回值是 Future 对象的 I/O 方法，前面已经介绍。还有就是需要传入一个 attachment 参数和一个 CompletionHandler 参数，这是基于完成例程的方式。connect 异步操作public abstract Future<Void> connect(SocketAddress remote);public abstract <A> void connect(SocketAddress remote, A attachment, CompletionHandler<Void,? super A> handler);accept 异步操作public abstract Future<AsynchronousSocketChannel> accept();public abstract <A> void accept(A attachment, CompletionHandler<AsynchronousSocketChannel,? super A> handler);read 异步操作public abstract Future<Integer> read(ByteBuffer dst);public final <A> void read(ByteBuffer dst, A attachment, CompletionHandler<Integer,? super A> handler) write 异步操作public abstract Future<Integer> write(ByteBuffer src); public final <A> void write(ByteBuffer src, A attachment, CompletionHandler<Integer,? super A> handler) 通过 Future 实现异步客户端、服务器程序，尽管 I/O 相关方法调用是异步的，但是还得通过 Future 的 get 方法获取操作的结果，而 Future 的 get 调用是同步的，所以还是没有做到完全异步。而通过 CompletionHandler 获取 I/O 结果，所有 I/O 操作的执行结果都会通过 CompletionHandler 回调返回。
• 1. 调用动画 定义好了就可以去调用了，来看一下怎么调用：/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(无限) */ animation: loading .6s step-end infinite;}/* 定义动画：动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标，第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标：-130 y坐标：0 */ 20% { background-position: -260px 0 } /* x坐标：-260 y坐标：0 */ 30% { background-position: -390px 0 } /* x坐标：-390 y坐标：0 */ 40% { background-position: -520px 0 } /* x坐标：-520 y坐标：0 */ 50% { background-position: 0 -130px } /* x坐标：0 y坐标：-130 */ 60% { background-position: -130px -130px } /* x坐标：-130 y坐标：-130 */ 70% { background-position: -260px -130px } /* x坐标：-260 y坐标：-130 */ 80% { background-position: -390px -130px } /* x坐标：-390 y坐标：-130 */ 90% { background-position: -520px -130px } /* x坐标：-520 y坐标：-130 */ to { background-position: 0 } /* 最后一帧不显示，可以随便写 */}为了能够让同学们在浏览器里直接看结果，我们这里写了一个可运行的案例：910运行结果：  可以看到效果就已经很完美的呈现出来了，那么接下来我们再来添加一下条形雪碧图，看看条形雪碧图的用法有何不同。
• 4. 重新调整速度 尺寸的问题是解决了，怎么速度又不对了？原来是因为雪碧图缩小了一半，所以现在的宽只有 1300 px了。可是我们定义的动画是 -2600 px，于是乎动画在相同的时间移动了 2 倍的距离，看起来就会导致速度加快。解决办法也很简单，把定义的动画距离也同比例缩小：/* 清除浏览器默认边距 */* { padding: 0; margin: 0; }body { /* 这段代码是为了居中显示，不是重点，看不懂的话可以无视 */ height: 100vh; display: flex; align-items: center; justify-content: center; /* 添加背景图 */ background: url(../img/bg.jpg) center / cover;}.animate { width: 130px; height: 130px; background: url(../img/rect.png); /* 动画: 动画名(loading) 时长(0.6秒) 运行方式(step-end) 动画次数(3次) 填充模式(双向) */ animation: loading .6s step-end 3 both, /* 动画可以定义多个，每个动画用逗号分隔。*/ /* 第二个动画的动画名(animate) 时长(0.8秒) 运行方式(step-end) 延时(1.8秒) 动画次数(无限) */ animate .8s steps(12) 1.8s infinite;}/* 定义动画：动画名(loading) */@keyframes loading { from { background-position: 0 0 } /* 第一个数字代表x轴坐标，第二个数字代表y轴坐标 */ 10% { background-position: -130px 0 } /* x坐标：-130 y坐标：0 */ 20% { background-position: -260px 0 } /* x坐标：-260 y坐标：0 */ 30% { background-position: -390px 0 } /* x坐标：-390 y坐标：0 */ 40% { background-position: -520px 0 } /* x坐标：-520 y坐标：0 */ 50% { background-position: 0 -130px } /* x坐标：0 y坐标：-130 */ 60% { background-position: -130px -130px } /* x坐标：-130 y坐标：-130 */ 70% { background-position: -260px -130px } /* x坐标：-260 y坐标：-130 */ 80% { background-position: -390px -130px } /* x坐标：-390 y坐标：-130 */ 90% { background-position: -520px -130px } /* x坐标：-520 y坐标：-130 */ /* 修改最后一帧，以便动画结束后盒子就应用最后一帧的样式 */ to { /* 下一个动画的宽高 */ width: 108px; height: 150px; /* 下一个动画的雪碧图 */ background-image: url(../img/animate.png); /* 雪碧图的最短边(这里是高)刚好能够覆盖住盒子 */ background-size: cover; }}/* 定义动画：动画名(animate) */@keyframes animate { from { background-position: 0 } to { background-position: -1300px }}运行结果：911
• 3.5 SelectionKey 介绍 SelectionKey 是由 AbstractSelectableChannel 的 register 方法返回的，主要包含一个事件类型和上下文对象。SelectionKey 提供了一组方法，用以识别 I/O 事件类型。声明如下：public final boolean isAcceptable()public final boolean isConnectable()public final boolean isReadable()public final boolean isWritable()可以通过 SelectionKey 的 channel 方法，获取关联的 Channel，声明如下：public abstract SelectableChannel channel()可以通过 SelectionKey 的 attachment 方法，获取关联的上下文对象。public final Object attachment()SelectionKey 的各个方法相对简单，容易理解，我们在前面小节多次提到，不再赘述。

background attachment相关搜索

back backbone background background attachment background color background image background position background repeat backgroundcolor backgroundimage background属性 badge bash basics basis bat bdo bean before begintransaction

查看更多慕课网实用课程