Question

我尝试使用带有图像作为背景的div的小代码，其中包含一些文字。

在这种情况下，当用户点击div时，背景应该变为白色（并且它正常工作）。但最初，存在的文本应该在Image后面。更像是前景图像。

这是一个工作小提琴。 https://jsfiddle.net/rj0h1g16/

请让我知道我哪里出错了，我该如何解决这个问题。

由于

Answer 1

你可以通过最初将文本不透明度设置为0并使用相同的单击事件将其颜色更改为黑色来实现此目的

function remove_image() {
  document.getElementById("myClass").style.background = "white";
  document.getElementById("myClass").style.color = "black";
}

.myClass {
  background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
  height: 100px;
  width: 100px;
  color: rgba(0, 0, 0, 0);
}

<div class="myClass" id="myClass" onclick="remove_image()">
  This is texr
</div>

Answer 2

你可以简单地在＆＃34; none＆＃34;的文本上设置显示样式。点击时的任何其他内容。

<div class="myClass" id="myClass" onclick="remove_image()">
   <div class="myText" id="myText"> This is texr</div> 
</div>

function remove_image() {
  document.getElementById("myClass").style.background = "white";
  document.getElementById("myText").style.display = "inline";
}

.myClass {
  background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
  height: 100px;
  width: 100px
}
.myText {
  display: none;
}

见这里：https://jsfiddle.net/hg748zk7/

Answer 3

我想要图片背后的文字

您可以使用z-index属性。但是文本需要包含在一个新元素中。

在示例中，我使用js添加了一个具有所需新属性的类。

＆＃13;

function remove_image() {
  document.getElementById("myClass").classList.add('active');
}

＆＃13;

.myClass {
  background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
  height: 100px;
  width: 100px
}

.myClass.active {
  background: white;
}

span {
  z-index: -1;
  position: relative;
}

.myClass.active span {
  z-index: 1;
}

＆＃13;

<div class="myClass" id="myClass" onclick="remove_image()">
  <span>This is text</span>
</div>

＆＃13;

Answer 4

public class WestCoreDbContext : DbContext
{
    public WestCoreDbContext(DbContextOptions<WestCoreDbContext> options) : base(options)
    {

    }

    public virtual DbSet<SoftwareTestCase> SoftwareTestCases { get; set; }
    //Define further DbSets

    protected override void OnModelCreating(ModelBuilder modelBuilder)
    {
        modelBuilder.ApplyConfiguration(new SoftwareTestCaseConfiguration());
        //Apply further configurations

        modelBuilder.MyOracleNamingConventions();

        base.OnModelCreating(modelBuilder);
    }

    public bool HasChanges()
    {
        return ChangeTracker.Entries().Any(e => e.State == EntityState.Added || e.State == EntityState.Modified || e.State == EntityState.Deleted);
    }
}

//This configuration class is separated from the WestCoreDbContext and can go into a separate code file
internal class SoftwareTestCaseConfiguration : IEntityTypeConfiguration<SoftwareTestCase>
{
    public void Configure(EntityTypeBuilder<SoftwareTestCase> modelBuilder)
    {
        modelBuilder.Entity<SoftwareTestCase>().HasOne(x => x.SoftwareTest).WithMany(op => op.SoftwareTestCases).IsRequired().HasForeignKey(@"StId");
        modelBuilder.Entity<SoftwareTestCase>().HasMany(x => x.SoftwareTestCaseSteps).WithOne(op => op.SoftwareTestCase).IsRequired().HasForeignKey("StcId");
    }
}

function remove_image() {
  document.getElementById("myClass").style.background = "white";
  document.getElementsByTagName('span')[0].style.display = 'block'
}

.myClass {
  background: url("https://cdn2.droom.in/photos/images/drm/super-cars.png");
  height: 100px;
  width: 100px;
}

隐藏图像背后的内容

4 个答案: