草庐IT

【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )

韩曙亮 2023-04-15 原文

文章目录





一、插入图片



1、简介


插入图片 :

  • 插入图片方式 : 在 HTML 中 , 使用 <img> 标签可以插入一张图片 ;
  • 插入图片适用场景 : 显示 内容 , 按钮 , 一般都使用 插入图片 的方式 展示图片 ,
  • 设置插入图片大小 : 通过设置 盒子模型 内容尺寸 而设置图片大小 ;
    • width 设置图片内容宽度 ;
    • height 设置图片内容高度 ;
  • 设置插入图片显示位置 : 通过设置 盒子模型 左边距 和 上边距 而设置图片的位置 ;
    • margin-left 设置图片的 左外边距 ;
    • margin-top 设置图片的 上外边距 ;

代码示例 :

 	img {  
 		/* 设置图片大小 */
		width: 200px;
		height: 200px;

		/* 通过修改 盒子模型 外边距 修改图片显示位置 */
		margin-left: 50px;
		margin-top: 50px;
	}

2、代码示例


在该示例中 , 使用

<img src="images/image.jpg">

标签 , 插入图片 ,

通过设置 <img> 标签的宽高

			width: 200px;
			height: 200px;

来设置图片大小 ,

通过设置 <img> 标签的 外边距

			/* 通过修改 盒子模型 外边距 修改图片显示位置 */
			margin-left: 50px;
			margin-top: 50px;

来设置图片的位置 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>插入图片</title>
	<style type="text/css">
		img {  
			/* 设置图片大小 */
			width: 200px;
			height: 200px;

			/* 通过修改 盒子模型 外边距 修改图片显示位置 */
			margin-left: 50px;
			margin-top: 50px;
		}
	</style>
</head>
<body>
	<div class="pic">
		<img src="images/image.jpg">
	</div>
</body>
</html>

展示效果 :





二、背景图片



1、简介


背景图片 :

  • 设置背景图片方式 : 在 CSS 中 , 为 盒子 设置 background 属性 , 设置背景图片 ;
		/* 设置图片背景 */
		background: pink url(images/image.jpg) no-repeat;
  • 背景图片适用场景 : 显示 小图标 或 超大背景 , 一般都使用 背景图片 的方式 展示图片 ;
  • 设置背景图片大小 : 通过设置 背景图片的尺寸 而设置图片大小 ;
  • 设置背景图片显示位置 : 通过修改 背景位置 background-position 修改图片显示位置 ;

代码示例 :

 	div {  
 		/* 设置盒子大小 */
		width: 400px;
		height: 400px;

		/* 设置图片背景 */
		background: pink url(images/image.jpg) no-repeat;
		/* 通过修改 背景位置 background-position 修改图片显示位置 */
		background-position: 50px 50px;
	}

2、代码示例


在该示例中 , 使用 
background: pink url(images/image.jpg) no-repeat;

CSS 样式 , 设置背景图片 ,

通过修改 背景位置 background-position 修改图片显示位置

			/* 通过修改 背景位置 background-position 修改图片显示位置 */
			background-position: 50px 50px;

来设置图片的位置 ;


代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>背景图片</title>
	<style type="text/css">
		div {  
			/* 设置盒子大小 */
			width: 400px;
			height: 400px;

			/* 设置图片背景 */
			background: pink url(images/image.jpg) no-repeat;
			/* 通过修改 背景位置 background-position 修改图片显示位置 */
			background-position: 50px 50px;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

展示效果 :

背景图片外边spanclasstokencsshtml前端插入图片

有关【CSS】盒子模型外边距 ③ ( 插入图片 | 插入图片位置移动 - 修改外边距 | 背景图片 | 背景图片移动位置 - 修改背景位置 background-position )的更多相关文章

  1. ruby - 多次弹出/移动 ruby​​ 数组 - 2

    我的代码目前看起来像这样numbers=[1,2,3,4,5]defpop_threepop=[]3.times{pop有没有办法在一行中完成pop_three方法中的内容？我基本上想做类似numbers.slice(0,3)的事情，但要删除切片中的数组项。嗯...嗯，我想我刚刚意识到我可以试试slice! 最佳答案 是numbers.pop(3)或者numbers.shift(3)如果你想要另一边。 关于ruby-多次弹出/移动ruby​​数组，我们在StackOverflow上找到一

  2. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB？ - 2

    所以我在关注Railscast，我注意到在html.erb文件中，ruby代码有一个微弱的背景高亮效果，以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果？谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*，只需点击cmd+shift+P即可获得命令菜单，然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中，键入ERB并在看到包时选择

  3. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片，我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在，我只能让文本显示在左上角，但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法，你必须自己移植

  4. ruby-on-rails - Ruby on Rails - 为文本区域和图片生成列 - 2

    我是Rails的新手，所以请原谅简单的问题。我正在为一家公司创建一个网站。那家公司想在网站上展示它的客户。我想让客户自己管理这个。我正在为“客户”生成一个表格，我想要的三列是:公司名称、公司描述和Logo。对于名称，我使用的是name:string但不确定如何在脚本/生成脚手架终端命令中最好地创建描述列(因为我打算将其设置为文本区域)和图片。我怀疑描述(我想成为一个文本区域)应该仍然是描述:字符串，然后以实际形式进行调整。不确定如何处理图片字段。那么……说来话长:我在脚手架命令中输入什么来生成描述和图片列？ 最佳答案 对于“文本”数

  5. ruby-on-rails - 如何重命名或移动 Rails 的 README_FOR_APP - 2

    当我在我的Rails应用程序根目录中运行rakedoc:app时，API文档是使用/doc/README_FOR_APP作为主页生成的。我想向该文件添加.rdoc扩展名，以便它在GitHub上正确呈现。更好的是，我想将它移动到应用程序根目录(/README.rdoc)。有没有办法通过修改包含的rake/rdoctask任务在我的Rakefile中执行此操作？是否有某个地方可以查找可以修改的主页文件的名称？还是我必须编写一个新的Rake任务？额外的问题:Rails应用程序的两个单独文件/README和/doc/README_FOR_APP背后的逻辑是什么？为什么不只有一个？

  6. ruby-on-rails - rbenv:从 RVM 移动到 rbenv 后，在 Jenkins 执行 shell 中找不到命令 - 2

    我从Ubuntu服务器上的RVM转移到rbenv。当我使用RVM时，使用bundle没有问题。转移到rbenv后，我在Jenkins的执行shell中收到“找不到命令”错误。我内爆并删除了RVM，并从~/.bashrc'中删除了所有与RVM相关的行。使用后我仍然收到此错误:rvmimploderm~/.rvm-rfrm~/.rvmrcgeminstallbundlerecho'exportPATH="$HOME/.rbenv/bin:$PATH"'>>~/.bashrcecho'eval"$(rbenvinit-)"'>>~/.bashrc.~/.bashrcrbenvversions

  7. 安卓apk修改(Android反编译apk) - 2

    最近因为项目需要，需要将Android手机系统自带的某个系统软件反编译并更改里面某个资源，并重新打包，签名生成新的自定义的apk，下面我来介绍一下我的实现过程。APK修改，分为以下几步：反编译解包,修改,重打包,修改签名等步骤。安卓apk修改准备工作1.系统配置好JavaJDK环境变量2.需要root权限的手机（针对系统自带apk,其他软件免root）3.Auto-Sign签名工具4.apktool工具安卓apk修改开始反编译本文拿Android系统里面的Settings.apk做demo,具体如何将apk获取出来在此就不过多介绍了，直接进入主题：按键win+R输入cmd，打开命令窗口，并将路

  8. ruby - 正则表达式在哪个位置失败？ - 2

    我需要一个非常简单的字符串验证器来显示第一个符号与所需格式不对应的位置。我想使用正则表达式，但在这种情况下，我必须找到与表达式相对应的字符串停止的位置，但我找不到可以做到这一点的方法。(这一定是一种相当简单的方法……也许没有？)例如，如果我有正则表达式:/^Q+E+R+$/带字符串:"QQQQEEE2ER"期望的结果应该是7 最佳答案 一个想法:你可以做的是标记你的模式并用可选的嵌套捕获组编写它:^(Q+(E+(R+($)?)?)?)?然后你只需要计算你获得的捕获组的数量就可以知道正则表达式引擎在模式中停止的位置，你可以确定匹配结束

  9. ruby - 如何在 Ruby 字符串中插入项目符号字符？ - 2

    我正在尝试创建一个带有项目符号字符的Ruby1.9.3字符串。str="•"+"helloworld"但是，当我输入它时，我收到有关非ASCII字符的语法错误。我该怎么做？ 最佳答案 你可以把Unicode字符放在那里。str="\u2022"+"helloworld" 关于ruby-如何在Ruby字符串中插入项目符号字符？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/1195

  10. ruby - 下载位置 Selenium-webdriver Cucumber Chrome - 2

    我将Cucumber与Ruby结合使用。通过Selenium-Webdriver在Chrome中运行测试时，我想将下载位置更改为测试文件夹而不是用户下载文件夹。我当前的chrome驱动程序是这样设置的:Capybara.default_driver=:seleniumCapybara.register_driver:seleniumdo|app|Capybara::Selenium::Driver.new(app,:browser=>:chrome,desired_capabilities:{'chromeOptions'=>{'args'=>%w{window-size=1920,1

随机推荐