可扩展拉伸图像按钮

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了可扩展拉伸图像按钮相关的知识，希望对你有一定的参考价值。

Replace background colors with your images.
  1. <!DOCTYPE html>
  2. <head>
  3. <title>Stretchy button</title>
  4. <style>
  5. .btn1 {
  6. 	position: absolute;
  7. 	top: 0; left: 0;
  8. 	cursor: pointer;
  9. 	text-decoration: none;}
  10.  
  11. .btn1 p span {
  12. 	padding-top: 10px;
  13. 	height: 27px;
  14. 	color: #88c133;
  15. 	font-family: 'Arial';
  16. 	font-size: 0.9em;
  17. 	float: left;}
  18.  
  19. .btn1 p .span1 {
  20. 	top: 0; left: 0;
  21. 	background: red;
  22. 	width: 13px;}
  23.  
  24. .btn1 p:hover .span1 {background: blue;}
  25.  
  26. .btn1 p .span2 {
  27. 	top: 0; right: 0;
  28. 	padding-right: 25px;
  29. 	padding-left: 12px;
  30. 	background: green;}
  31.  
  32. .btn1 p:hover .span2 {color: #000; background: yellow;}
  33. </style>
  34. </head>
  35.  
  36. <body>
  37.  
  38. <a class="btn1" href="page.htm"><p>
  39.     <span class="span1">&nbsp;</span>
  40.     <span class="span2">Stretchy button!</span></p>
  41. </a>
  42.  
  43. </body>
  44. </html>
  45.  
  46.  
  47. //alt
  48.  
  49. .btn1 {
  50. 	width: auto;
  51. 	position: absolute;
  52. 	bottom: 20px; left: 20px;
  53. 	cursor: pointer;
  54. 	text-decoration: none;}
  55.  
  56. .btn1 p span {
  57. 	padding-top: 6px;
  58. 	height: 29px;
  59. 	width: auto;
  60. 	color: #fff;
  61. 	font-family: inherit;
  62. 	text-transform: uppercase;
  63. 	font-size: 1.5em;
  64. 	float: left;}
  65.  
  66. .btn1 p .span1 {
  67. 	position: absolute;
  68. 	background: url(btn1.gif) left top no-repeat;
  69. 	width: 20px;
  70. 	float: right;}
  71.  
  72. .btn1 p:hover .span1 {width: 20px; background: url(btn1.gif) -20px top no-repeat;}
  73.  
  74. .btn1 p .span2 {
  75. 	padding-right: 8px;
  76. 	padding-left: 12px;
  77. 	background: #ae4c25;
  78. 	float: left;}
  79.  
  80. .btn1 p:hover .span2 {color: #fff; background: #315766;}

以上是关于可扩展拉伸图像按钮的主要内容，如果未能解决你的问题，请参考以下文章

按钮的导航栏项目拉伸图像

防止在 iOS 的 Scrollview 中拉伸图像

UIBarButtonItem自定义图像被拉伸（Xcode）

在按钮顶部拉伸图像以推动视图控制器

iOS - 在堆栈视图中拉伸的图像

如何制作一个包含在整个屏幕上拉伸的背景图像的颤动应用程序，带有返回句子的图像的圆形按钮？