cssで画像の上に文字を重ねる

Question

画像の上に文字を重ねたいのですが、htmlで<p>テキスト</p>としてcssで画像と文字の位置を調節して画像の上に文字が重なるようには出来るのですが使うファイルがいくつかあるのでcssでtextを入力、画像を挿入して、画像を文字の上に重ねるようにしたいです。
cssでcontentで文字を入れてあげたのですが文字が表示されません。
わかる方がいたら教えてもらいたいです

.button_img {
background:url(../img/btn_img) no-report;
width: 100px;
height: 40px;
content: "保存"
}

Comments

[yoshinavi]

「content」使用が必須なのでしょうか？ 全体が不明なので、推測に過ぎませんが、SEO的にはテキスト表示に支障が無いのであれば、テキスト表示が良いと思います。

[yoshinavi]

関連するHTMLコードも併せて提示してください。

Answer 1

HTMLはどういう感じなのでしょうか？
もしかしたら<img>タグを使っていますか？
<img>タグでは疑似要素を使えないため、他のタグにしましょう。

<!-- 例えば以下のような -->
<div class="button_img"></div>
<button class="button_img"></button>

.button_img {
  background: url("../img/btn_img") no-repeat;
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.button_img::before {
  content: "保存";
}

Comments

[cuku]

回答遅くなって申し訳ございません。

imgタグは使っていません！！

[cuku]

::befoと打つと予測変換で::before(2)というのが表示されるのですがこれは、他で使われているということなんでしょうか？

Answer 2

contentは擬似要素のプロパティ

やるなら

.button_img {
  background:url(../img/btn_img) no-repeat;
  width: 100px;
  height: 40px;
}
.button_img::before {
  content: "保存";
}

Comments

[cuku]

文字が表示されません。
どうしたらいいでしょうか？

[KazuhiroHatano]

セミコロン抜けてる

[KazuhiroHatano]

ローカルで試したけど表示します、ここ以外が原因
そもそも他ですでに::beforeを使ってるとか

[KazuhiroHatano]

× no-report → ◯ no-repeat

[cuku]

::before使ってないですね。セミコロンも付けました。
デベロッパーツールで見たら.button_img::before{}が見つかりませんでした

Answer 3

画像と文字の関係であればどうせやるならfigure-figcaptionでやってみてはどうでしょうか？