Question

如何使用html和css将图像放在按钮上？

<div>
  <img src="photo.jpg">
  <button>Text</button>
</div>

我想它应该像

div {
  position: relative;
}

img {
  position: absolute;
  top: 10px;
}

但它有点奇怪。

是否有可能只有一个普通的div然后将img设置为浮动在div元素中的其他所有内容上？

Answer 1

我不知道你的目的究竟是什么，如果你想让图像占据整行，让按钮位于下方，为什么不将图像的CSS显示属性设置为display:block;？< / p>

Answer 2

您可以在img上使用position: absolute和transform: translate()。

这calc(-100% - 1px)表示

-100%或- height of element (img in this case)，因此它会在Y轴上自行转换高度
-1px用于div元素的上边框。

＆＃13;

div {
  position: relative;
  display: inline-block;
  border: 1px solid black;
  margin-top: 100px;
}
img {
  position: absolute;
  top: 0;
  transform: translateY(calc(-100% - 1px));
}

＆＃13;

<div>
  <img src="http://placehold.it/50x50">
  <button>Text</button>
</div>

＆＃13;

只是为了证明你是否有5px的边界，那么你应该在calc中使用-5px。

＆＃13;

div {
  position: relative;
  display: inline-block;
  border: 5px solid black;
  margin-top: 100px;
}
img {
  position: absolute;
  top: 0;
  transform: translateY(calc(-100% - 5px));
}

＆＃13;

<div>
  <img src="http://placehold.it/50x50">
  <button>Text</button>
</div>

＆＃13;

Answer 3

你好，请看下面的一个简单的几行代码

import android.content.Intent;

import android.os.Bundle;
import android.support.v7.widget.RecyclerView;
import android.content.Context;
import android.widget.ImageView;
import android.widget.TextView;
import android.view.LayoutInflater;

import java.util.List;

import com.bumptech.glide.Glide;

import android.view.View;
import android.view.ViewGroup;

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private Context context;
    private List<MyData> my_data;

    public MyAdapter(Context context, List<MyData> my_data) {
        this.context = context;
        this.my_data = my_data;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

        View itemView = LayoutInflater.from(parent.getContext()).inflate(R.layout.recycler_child, parent, false);

        final ViewHolder holder = new ViewHolder(itemView);
        itemView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                int position = holder.getAdapterPosition();
                Intent intent = new Intent(context, article.class);
                Bundle bundle = intent.putExtra("image_link", my_data.getImage_link());
                context.startActivity(intent);
            }
        });

        return new ViewHolder(itemView);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        holder.description.setText(my_data.get(position).getDescription());
        Glide.with(context).load(my_data.get(position).getImage_link()).into(holder.imageView);
    }

    @Override
    public int getItemCount() {
        return my_data.size();
    }


    public class ViewHolder extends RecyclerView.ViewHolder {

        public TextView description;
        public ImageView imageView;

        public ViewHolder(View itemView) {
            super(itemView);
            description = (TextView) itemView.findViewById(R.id.textView);
            imageView = (ImageView) itemView.findViewById(R.id.image);
        }
    }
}

Answer 4

＆＃13;

#bottom{
    background-repeat: repeat-x;    
    height:121px;
    width: 984px;
    margin-left: 20px;
    margin-top: 13px;
}

#bottom .content{    
    width: 182px; /*328 co je 1/3 - 20margin left*/
    height: 121px;
    line-height: 20px;
    margin-top: 0px;
    margin-left: 9px;
    margin-right:0px;
    display:inline-block;
    position:relative;
}

＆＃13;

<div id="bottom">
    <div class="content">
        <img src="http://placehold.it/182x121"/> 
        <button>Text</button>
    </div>      
  </div>

＆＃13;

Answer 5

可能是你想要达到这样的目标。

.userIcon {
  background: url('https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png') no-repeat;
  height:20px;
  width:20px;
  background-size:20px;
  top: 8px;
}
.left {
  float:left;
}
.right {
  float:right;
}
.clear{
  clear:both;
}
.button{  
  padding:10px;
  color: #FFF;
  background-color: #0095ff;
  border:1px solid #07c;
  box-shadow: inset 0 1px 0 #66bfff;
}
.btnText{
  margin:2px 0px 0px 10px;  
}

<div>
  <button class="button">
    <span class="left userIcon"></span>
    <span class="right btnText">Create user account</span>
    <span class="clear"></span>
  </button>
</div>

Answer 6

如果您只想让图像通过按钮，可以将显示设为块

检查以下代码段

div img{
  display:block;
}
button{
  text-align:center;
  margin:40px;
  padding:10px;
}

<div>
  <img src="https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png">
  <button>Text</button>
</div>

希望这有帮助

用css将图像放在元素顶部

6 个答案: