Question

所以我一直试图在css中旋转jpeg图像一段时间。图像位于p标签内。我想要做的是旋转图像，我想要文本文件包装图像，而不是触摸它。我设法做了包装部分，但由于一些奇怪的原因，当我尝试旋转图像时，它只旋转图像的背景。实际图像不旋转。这是html代码：

   <p><img src="Image.jpg" alt = "A picture of Jose"> 
      Some text
   </p>

    p img{
        float: right;
        margin-left: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        width: 200px;
        height: auto;
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
        position: relative;
        display: block;
    }

Answer 1

正如David Wilkinson写的那样，CSS只支持/ * ... * / comments，而不是//所以如果你使用最后一个它会打破风格。试试这个：

    /* Here is the CSS */
    p img{
        float: right;
        margin-left: 10px;
        margin-bottom: 10px;
        overflow: hidden;
        width: 200px;
        height: auto;
        -ms-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        transform: rotate(90deg);
        position: relative;
        display: block;
    }

Answer 2

您的代码正常运行，只是您使用此//Here is the css:代替/*Here is the css*/

进行评论

如果您想查看，请尝试使用此类代码

<style>
p img{
    float: right;
    margin-left: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    width: 200px;
    height: auto;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    position: relative;
    display: block;
}

// Here is the CSS:
</style>

现在此代码可以使用，但css之后的任何其他// Here is the CSS:代码都无效。所以对于css中的注释，请使用此/* css comment */

CSS旋转图像不起作用

2 个答案: