Question

我有一个我要放置背景的部分。我通过CSS尝试使用像background-image：url（＆＃34; path＆＃34;）这样的smth，但后来我无法访问margin-property。

我也将img通过html放入我的部分，但后来它不在文本后面，它缠绕着它。

我必须做些什么才能在我的部分中添加背景图像+也能够像我想要的那样定位它？

HTML

<secction class="termine">
<img src="path" class="container-image"/>
</section>

修改

CSS

.container-image{
    float: right;
    position: absolute;
    margin-top:56px;
}

.termine{
    height:505px;
}

我的部分正在整个屏幕上。有了这些css我的图片就是我想要它的样子，只有一个问题，它与左边对齐，我想把它对齐到右边。

我该怎么做？

Answer 1

这样的东西？

＆＃13;

 

   .termine{
    float: right;
    margin-top:56px;
    width:600px;
    height:100px;
    background-image:url("http://wallpaper-gallery.net/images/abstract/abstract-21.jpg");
    position:absolute
}

.termine{
    height:505px;
}
h2 { color: white; font-family: 'Open Sans', sans-serif; font-size: 30px; font-weight: 300; line-height: 32px; margin:20px; text-align: center; }


p { color: #eee; font-family: 'Helvetica Neue', sans-serif; font-size: 14px; line-height: 24px; margin:24px; text-align: justify; text-justify: inter-word; }

＆＃13;

   

 <section class="termine">
  <h2>HMMM WHAT IS TEXT OVER ONLY IMG??? </h2>
  <p>Immanuel Kant (/kænt/;[4] German: [ɪˈmaːnu̯eːl kant]; 22 April 1724 – 12 February 1804) was a German philosopher who is considered the central figure of modern philosophy.[5] Kant argued that the human mind creates the structure of human experience, that reason is the source of morality, that aesthetics arises from a faculty of disinterested judgment, that space and time are forms of our sensibility, and that the world as it is "in-itself" is independent of our concepts of it. Kant took himself to have effected a Copernican revolution in philosophy, akin to Copernicus' reversal of the age-old belief that the sun revolved around the earth. His beliefs continue to have a major influence on contemporary philosophy, especially the fields of metaphysics, epistemology, ethics, political theory, and aesthetics.</p>

</section>

＆＃13;

这是什么？

Answer 2

我想说，如果您使用的是css，则必须更改position: absolute代码。

.container-image{
    right: 0px;
    position: absolute;
    margin-top:56px;
}

.termine{
    height:505px;
}

这是你所期望的吗？

Answer 3

首先您需要将<secction class="termine">更改为<section class="termine">（在html中有任何名为<secction>的标记）
设置<section>
设置高度（100％ - 56px），宽度设置为100％;

然后它工作正常

.container-image{
    float: right;
    margin-top:56px;
  width:100%;
  height:calc(100% - 56px);
}

.termine{
    height:505px;
    width:300px;
  border:5px solid #000;
  box-sizing:border-box;
 /*background: url("https://i.stack.imgur.com/wwy2w.jpg") no-repeat;*/
}

<section class="termine">
<img src="https://i.stack.imgur.com/DATvo.jpg" class="container-image"/>
</section>

CSS部分中的背景图像

3 个答案: