css – 如何旋转容器中的背景图像?

前端之家收集整理的这篇文章主要介绍了css – 如何旋转容器中的背景图像?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想旋转放置在Chrome中滚动条按钮中的图片。现在我有一个CSS这个内容
  1. ::-webkit-scrollbar-button:vertical:decrement
  2. {
  3. background-image:url(images/arrowup.png) ;
  4. -webkit-transform:rotate(120deg);
  5. -moz-transform:rotate(120deg);
  6. background-repeat:no-repeat;
  7. background-position:center;
  8. background-color:#ECEEEF;
  9. border-color:#999;
  10. }

我希望旋转图像而不旋转其内容

解决方法

很好做和回答这里 –
http://www.sitepoint.com/css3-transform-background-image/
  1. #myelement:before
  2. {
  3. content: "";
  4. position: absolute;
  5. width: 200%;
  6. height: 200%;
  7. top: -50%;
  8. left: -50%;
  9. z-index: -1;
  10. background: url(background.png) 0 0 repeat;
  11. -webkit-transform: rotate(30deg);
  12. -moz-transform: rotate(30deg);
  13. -ms-transform: rotate(30deg);
  14. -o-transform: rotate(30deg);
  15. transform: rotate(30deg);
  16. }

猜你在找的CSS相关文章